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代码实现的列表展开效果，可以使用户更方便地查看感兴趣的信息。此外，这个效果也是非常流行的，可以看到这种动画效果被广泛地应用于很多站点中。