CSS 列表展開動畫是網站設計中非常常用的交互動效，可以提高用戶的交互體驗。這種動畫效果可以讓用戶點擊列表的標題，展開對應的內容，讓用戶輕松查閱感興趣的信息。下面是一個展示 CSS 列表展開動畫的代碼示例：

.list ul {
list-style: none;
overflow: hidden;
}
.list li {
margin-bottom: 10px;
transition: all 0.3s ease-out;
}
.list li:hover {
transform: translateY(-5px);
}
.list li.collapsed {
max-height: 0;
opacity: 0;
transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
}
.list li.collapsed >* {
opacity: 0;
}
.list li:not(.collapsed) {
max-height: 1000px;
opacity: 1;
}
.list li:not(.collapsed) >* {
opacity: 1;
}
.list .btn-toggle {
cursor: pointer;
}

該示例代碼中，.list 類作為最外層容器，ul 元素用于存放列表中的內容。每個列表項 li 上都有默認樣式，并添加了 margin-bottom 屬性。當鼠標懸停在列表項上時，會向上移動 5 像素，增加交互體驗。.collapsed 類用于控制收縮狀態的列表項，該樣式會將最大高度設為 0，同時讓其透明度為 0，實現列表項的收縮效果。同時，列表項內的元素也會被隱藏。當列表項處于展開狀態時，最大高度會增加至 1000 像素，同時將透明度設置為 1，實現所有元素的展開效果。

其中，.btn-toggle 類用于控制列表項展開和收縮的交互。用戶點擊時可通過 JavaScript 添加或刪除 .collapsed 類，即可實現列表項的展開與收縮。利用這些 CSS代碼實現的列表展開效果，可以使用戶更方便地查看感興趣的信息。此外，這個效果也是非常流行的，可以看到這種動畫效果被廣泛地應用于很多站點中。