引入 Animate.css 后，为 li 添加 animate__animated 与具体动画类，通过 JavaScript 控制触发时机，可实现列表项进入视口或延迟逐项播放动画效果。
使用 Animate.css 实现列表项（li 元素）的动画，关键是将 Animate.css 提供的动画类动态添加到每个 li 上。可以通过 CSS 类控制结合 JavaScript 触发，让每个列表项在显示或进入视口时播放动画。
引入 Animate.css 文件
在页面 head 中引入 Animate.css 的 CDN 或本地文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">为 li 元素添加动画类
Animate.css 的动画需要添加特定类名才能生效，例如 animate__fadeIn、animate__slideInUp 等。注意：Animate.css 4.0+ 版本使用 animate__ 前缀。
基础 HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
<ul id="animated-list"><li class="animate__animated">列表项 1</li>
<li class="animate__animated">列表项 2</li>
<li class="animate__animated">列表项 3</li>
</ul>
animate__animated 是所有动画必须的基础类，再添加具体动画名称即可触发效果。
通过 JavaScript 控制动画触发时机
直接写死动画类会导致页面加载时立即播放，通常我们希望在元素可见或某个操作后才播放。可以使用 JavaScript 动态添加动画类。
示例：页面加载后延迟逐个播放“从下往上滑入”动画：
<script>document.addEventListener("DOMContentLoaded", function () {
const listItems = document.querySelectorAll("#animated-list li");
listItems.forEach((item, index) => {
setTimeout(() => {
item.classList.add("animate__slideInUp");
}, index * 200); // 每个延迟 200ms，形成连贯动画
});
});
</script>
结合 Intersection Observer 实现视口内触发动画
更实用的方式是当用户滚动到列表位置时才触发动画，避免页面一开始就播放。
JavaScript 示例：
<script>const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("animate__fadeInLeft");
observer.unobserve(entry.target); // 动画只播放一次
}
});
});
document.querySelectorAll("#animated-list li").forEach(li => {
li.classList.add("animate__animated");
observer.observe(li);
});
</script>
这样每个 li 在进入浏览器视口时会从左滑入并淡入，视觉效果自然流畅。
基本上就这些。关键点是：引入 Animate.css、给 li 添加 animate__animated 和具体动画类，并用 JavaScript 控制触发时机，就能实现漂亮的列表动画效果。
