Animate.css是目前前端开发中使用非常广泛的CSS动画库，它内置了数十种常见的动画效果，而animated类是所有动画生效的核心标识，所有需要添加动画的元素都需要先添加这个类，再配合对应的动画名称类才能触发效果。
animated类的基本使用步骤
使用animated类实现动画的步骤非常简单，只需要三步即可完成：
- 首先在页面中引入Animate.css的样式文件，可以通过CDN引入，也可以下载到本地后引入。
- 给需要添加动画的目标元素添加
animated类。 - 再给该元素添加对应的动画名称类，比如
bounce（弹跳）、fadeIn（淡入）等。
下面是一个最简单的示例，当页面加载完成后，一个div元素会执行弹跳动画：
<!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">
</head>
<body>
<div class="animate__animated animate__bounce" style="width: 200px; height: 200px; background: #409eff; margin: 100px auto; text-align: center; line-height: 200px; color: #fff;">
弹跳动画元素
</div>
</body>
</html>常用动画类型与对应类名
Animate.css4.x版本之后，所有动画类名都添加了animate__前缀，animated类也变成了animate__animated，使用时需要注意版本差异。常见的动画类型可以分为以下几类：
| 动画分类 | 对应动画类名示例 | 动画效果说明 |
|---|---|---|
| 淡入类 | animate__fadeIn、animate__fadeInLeft、animate__fadeInUp | 元素从不同方向淡入显示 |
| 淡出类 | animate__fadeOut、animate__fadeOutRight、animate__fadeOutDown | 元素从不同方向淡出隐藏 |
| 弹跳类 | animate__bounce、animate__bounceIn、animate__bounceOut | 元素模拟弹跳的物理效果 |
| 滑动类 | animate__slideInLeft、animate__slideInRight、animate__slideOutUp | 元素从边缘滑入或滑出 |
| 缩放类 | animate__zoomIn、animate__zoomOut、animate__zoomInLeft | 元素放大或缩小显示 |
自定义动画参数
默认的动画参数可能无法满足所有场景的需求，我们可以通过CSS自定义属性来修改动画的持续时间、延迟时间、重复次数等参数：
--animate-duration：设置动画持续时间，默认是1s，比如设置为2s可以让动画播放更慢。--animate-delay：设置动画延迟时间，默认是0s，比如设置为1s可以让元素加载后1秒再播放动画。--animate-repeat：设置动画重复次数，默认是1次，设置为infinite可以让动画无限循环。
下面的示例展示了自定义动画参数的用法，元素会延迟1秒播放，持续2秒，并且无限循环弹跳动画：
<!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">
<style>
.custom-animate {
--animate-duration: 2s;
--animate-delay: 1s;
--animate-repeat: infinite;
}
</style>
</head>
<body>
<div class="animate__animated animate__bounce custom-animate" style="width: 200px; height: 200px; background: #f56c6c; margin: 100px auto; text-align: center; line-height: 200px; color: #fff;">
自定义参数动画
</div>
</body>
</html>动态控制动画触发
很多时候我们不需要元素加载就播放动画，而是希望在滚动到可视区域、点击按钮等交互场景下再触发动画，这时候可以通过JavaScript动态添加或移除类名来实现。
下面的示例实现了点击按钮后给元素添加动画类，动画结束后移除类的功能：
// 获取目标元素和触发按钮
const targetEl = document.querySelector('.animate-target');
const triggerBtn = document.querySelector('.trigger-btn');
// 点击按钮触发动画
triggerBtn.addEventListener('click', function() {
// 先移除可能存在的动画类，避免重复添加不生效
targetEl.classList.remove('animate__bounce');
// 触发重排，确保类移除后再添加可以重新触发动画
void targetEl.offsetWidth;
// 添加动画类
targetEl.classList.add('animate__bounce');
});
// 动画结束事件监听，动画结束后移除动画类
targetEl.addEventListener('animationend', function() {
targetEl.classList.remove('animate__bounce');
});对应的HTML结构如下：
<button class="trigger-btn" style="padding: 10px 20px; margin: 20px auto; display: block;">触发动画</button>
<div class="animate__animated animate-target" style="width: 200px; height: 200px; background: #67c23a; margin: 0 auto; text-align: center; line-height: 200px; color: #fff;">
点击按钮触发动画
</div>使用注意事项
- 如果使用的是Animate.css4.x及以上版本，一定要记得给所有类名添加
animate__前缀，否则动画不会生效。 - 不要给同一个元素同时添加多个动画名称类，否则可能会出现动画冲突的情况。
- 如果动画需要重复触发，需要在添加动画类之前先移除该类，并且触发一次重排，否则浏览器会认为类名没有变化，不会重新执行动画。
- 对于性能要求较高的页面，尽量减少同时执行动画的元素数量，避免造成页面卡顿。
Animate.cssanimated类CSS动画网页动画修改时间：2026-06-04 18:17:41