引入 Animate.css 后，为 li 添加 animate__animated 与具体动画类，通过 JavaScript 控制触发时机，可实现列表项进入视口或延迟逐项播放动画效果。
使用 Animate.css 实现列表项（li 元素）的动画，关键是将 Animate.css 提供的动画类动态添加到每个 li 上。可以通过 CSS 类控制结合 JavaScript 触发，让每个列表项在显示或进入视口时播放动画。
引入 Animate.css 文件
在页面 head 中引入 Animate.css 的 CDN 或本地文件：
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 结构示例：
立即学习“前端免费学习笔记（深入）”；
- 列表项 1
- 列表项 2
- 列表项 3
animate__animated 是所有动画必须的基础类，再添加具体动画名称即可触发效果。
通过 JavaScript 控制动画触发时机
直接写死动画类会导致页面加载时立即播放，通常我们希望在元素可见或某个操作后才播放。可以使用 JavaScript 动态添加动画类。
示例：页面加载后延迟逐个播放“从下往上滑入”动画：
结合 Intersection Observer 实现视口内触发动画
更实用的方式是当用户滚动到列表位置时才触发动画，避免页面一开始就播放。
JavaScript 示例：
这样每个 li 在进入浏览器视口时会从左滑入并淡入，视觉效果自然流畅。
基本上就这些。关键点是：引入 Animate.css、给 li 添加 animate__animated 和具体动画类，并用 JavaScript 控制触发时机，就能实现漂亮的列表动画效果。
