Animate.css 是一款轻量级的 CSS 动画库，内置了多种常见的动画效果，开发者无需自己编写复杂的 CSS 动画关键帧，只需要添加对应的类就能让元素触发动画。在 Animate.css 的所有使用场景中，animated 类都是必不可少的基础类，它定义了动画的核心属性和基础样式，是其他所有具体动画类生效的前提。
animated 类的核心作用
animated 类是 Animate.css 动画库的基础样式类，它的主要作用是给元素设置动画所需的基础 CSS 属性，比如动画播放时长、动画填充模式、动画播放状态等。如果只给元素添加具体的动画类，没有添加 animated 类，动画是不会生效的。
我们可以查看 Animate.css 源码中 animated 类的定义：
.animated {
animation-duration: 1s; /* 动画默认播放时长1秒 */
animation-fill-mode: both; /* 动画结束后保持最后一帧状态 */
}
.animated.infinite {
animation-iteration-count: infinite; /* 无限循环播放动画 */
}animated 类的使用方式
使用 animated 类需要搭配 Animate.css 提供的其他具体动画类，通用格式是为目标元素同时添加 animated 类和对应的动画类，下面是基本的使用示例：
<!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>
<!-- 引入Animate.css库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<!-- 同时添加animated类和bounce动画类 -->
<div class="animated bounce">这是一个弹跳动画元素</div>
</body>
</html>常见搭配的动画类说明
Animate.css 提供了丰富的动画类，以下是一些常用的动画类，可以和 animated 类搭配使用：
bounce：弹跳动画fadeIn：淡入动画fadeOut：淡出动画slideInLeft：从左侧滑入动画slideInRight：从右侧滑入动画zoomIn：缩放进入动画
自定义动画参数
默认的 animated 类设置的动画时长是1秒，如果需要自定义动画的播放时长、延迟时间等参数，可以通过自定义 CSS 样式覆盖默认属性，示例代码如下：
/* 自定义动画时长为2秒 */
.my-element {
animation-duration: 2s;
}
/* 自定义动画延迟1秒播放 */
.my-element-delay {
animation-delay: 1s;
}在 HTML 中使用的时候，只需要给元素添加对应的自定义类即可：
<div class="animated bounce my-element">时长为2秒的弹跳动画</div> <div class="animated fadeIn my-element-delay">延迟1秒淡入的元素</div>
动态控制动画触发
在实际开发中，我们往往不需要元素加载就触发动画，而是希望在滚动到元素位置、点击按钮等场景下触发动画，这时候可以通过 JavaScript 动态添加 animated 类和动画类来实现，示例代码如下：
// 获取目标元素
const targetElement = document.getElementById('target');
// 点击按钮触发动画
document.getElementById('triggerBtn').addEventListener('click', function() {
// 添加animated类和fadeIn动画类
targetElement.classList.add('animated', 'fadeIn');
// 动画结束后移除类，方便下次触发
targetElement.addEventListener('animationend', function() {
targetElement.classList.remove('animated', 'fadeIn');
}, { once: true });
});注意事项
- animated 类必须和具体动画类同时使用，单独使用 animated 类不会触发任何动画效果。
- 如果元素本身有其他的 animation 相关样式，可能会和 animated 类的样式产生冲突，需要提前排查样式优先级问题。
- Animate.css 4.x 版本之后，部分动画类的名称有调整，使用时需要确认对应版本的文档，避免类名错误导致动画失效。
Animate.cssanimated_类CSS动画前端动画实现修改时间：2026-06-05 18:07:21