Animate.css是一款轻量级的CSS动画库，内置了抖动、淡入、滑入等多种预设动画效果，开发者只需要引入对应的CSS文件，给目标元素添加对应的动画类就能快速实现动画效果。在列表页面的开发中，给li元素添加动画可以让页面交互更生动，下面介绍具体的实现方法。
一、引入Animate.css库
首先需要在项目中引入Animate.css的样式文件，有两种常用的引入方式：
1. CDN引入
直接在HTML的<head>标签中添加如下链接，适合快速测试或者小型项目：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
2. 本地引入
也可以从官网下载Animate.css的文件，放到项目的静态资源目录中，再通过相对路径引入：
<link rel="stylesheet" href="./css/animate.min.css">
二、基础列表项动画实现
Animate.css 4.x版本之后，动画类需要添加animate__animated基础类，再搭配具体的动画类使用。给li元素添加这两个类，就可以让列表项加载时自动触发动画。
示例：列表项淡入动画
下面的代码实现了无序列表的li元素在页面加载时依次淡入的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate.css列表项动画示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* 给每个li设置动画延迟，实现依次出现的效果 */
li:nth-child(1) { animation-delay: 0.1s; }
li:nth-child(2) { animation-delay: 0.2s; }
li:nth-child(3) { animation-delay: 0.3s; }
li:nth-child(4) { animation-delay: 0.4s; }
li:nth-child(5) { animation-delay: 0.5s; }
</style>
</head>
<body>
<ul>
<li class="animate__animated animate__fadeInUp">列表项一</li>
<li class="animate__animated animate__fadeInUp">列表项二</li>
<li class="animate__animated animate__fadeInUp">列表项三</li>
<li class="animate__animated animate__fadeInUp">列表项四</li>
<li class="animate__animated animate__fadeInUp">列表项五</li>
</ul>
</body>
</html>
代码中使用的是animate__fadeInUp类，表示元素从下方淡入的动画效果，通过animation-delay给每个li设置不同的延迟时间，就能实现列表项依次出现的效果。
三、交互触发列表项动画
除了页面加载时自动触发动画，还可以结合JavaScript实现点击、鼠标悬停等交互场景下的动画触发。
示例：点击按钮触发列表项动画
下面的代码实现了点击按钮后，所有li元素触发抖动动画的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互触发列表项动画</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<button id="triggerBtn">触发列表动画</button>
<ul id="list">
<li class="animate__animated">列表项一</li>
<li class="animate__animated">列表项二</li>
<li class="animate__animated">列表项三</li>
</ul>
<script>
const btn = document.getElementById('triggerBtn');
const listItems = document.querySelectorAll('#list li');
btn.addEventListener('click', function() {
// 遍历所有li元素，添加抖动动画类
listItems.forEach(item => {
// 先移除之前的动画类，避免重复触发无效
item.classList.remove('animate__shakeX');
// 触发重排，让动画可以再次执行
void item.offsetWidth;
item.classList.add('animate__shakeX');
});
});
</script>
</body>
</html>
这里需要注意，如果同一个元素要重复触发同一个动画，需要先移除动画类，再触发重排，最后重新添加动画类，否则动画只会执行一次。
四、常见动画参数调整
Animate.css的动画参数可以通过CSS变量自定义，常见的可调整参数如下：
| CSS变量 | 作用 | 默认值 |
|---|---|---|
| --animate-duration | 动画持续时间 | 1s |
| --animate-delay | 动画延迟时间 | 0s |
| --animate-repeat | 动画重复次数 | 1 |
比如要调整列表项动画的持续时间为0.5秒，可以在li的样式中添加如下代码：
li {
--animate-duration: 0.5s;
}
五、注意事项
- Animate.css 3.x版本不需要添加
animate__animated基础类，直接添加具体动画类即可，使用时要注意版本差异。 - 如果列表项是动态生成的，需要在生成元素后添加对应的动画类，延迟时间可以通过循环索引动态计算。
- 动画类会在动画结束后保留最终状态，如果需要动画结束后回到初始状态，可以添加
animate__infinite之外的自定义样式，或者监听动画结束事件移除动画类。
实际开发中可以根据页面的整体风格选择合适的Animate.css动画类，比如内容列表适合用淡入、滑入类动画，操作反馈类列表适合用抖动、弹跳类动画，合理搭配可以提升用户体验。
Animate.cssCSS动画li元素列表项动画修改时间：2026-07-18 03:45:34