Animate.css是一款轻量级的CSS动画库，内置了多种开箱即用的动画效果，而animated类是所有动画生效的必要基础类，只有给元素添加这个类，对应的具体动画类才能正常触发效果。
animated类的核心作用
animated类本身定义了动画的基础属性，包括动画的播放时长、播放状态、填充模式等通用配置，避免每个动画类都重复编写这些公共样式。查看Animate.css的源码可以看到，animated类的核心样式如下：
.animated {
animation-duration: 1s; /* 默认动画播放时长1秒 */
animation-fill-mode: both; /* 动画结束后保持最终状态 */
}
.animated.infinite {
animation-iteration-count: infinite; /* 无限循环播放动画 */
}如果只给元素添加animated类而不搭配具体动画类，元素不会有可见的动画效果，因为animated类只做了基础配置，没有定义具体的动画关键帧。
animated类的搭配使用方法
使用animated类实现动画需要两步：首先给目标元素添加animated类，然后根据需要的动画效果添加对应的具体动画类，比如bounce、fadeIn、slideInLeft等。
基础使用示例
实现一个弹跳效果的按钮，代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>animated类示例</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> </head> <body> <button class="animate__animated animate__bounce">弹跳按钮</button> </body> </html>
注意Animate.css 4.x版本之后，所有具体动画类都带有animate__前缀，animated类也改为animate__animated，和旧版本的写法略有区别。
控制动画播放时长
如果需要修改动画的播放时长，不需要修改animated类的源码，只需要在元素上添加自定义样式覆盖默认时长即可：
<button class="animate__animated animate__fadeIn" style="animation-duration: 2s;"> 2秒淡入的按钮 </button>
无限循环动画实现
如果需要动画无限循环播放，可以给元素添加animate__infinite类，这个类是animated类的配套类，用于设置动画迭代次数为无限：
<div class="animate__animated animate__rotateIn animate__infinite"> 无限旋转的图标 </div>
常见动画类搭配参考
以下是常用的具体动画类和对应的效果说明：
| 具体动画类 | 动画效果 |
|---|---|
| animate__fadeIn | 元素从透明淡入显示 |
| animate__slideInLeft | 元素从左侧滑入视口 |
| animate__bounce | 元素做弹跳运动 |
| animate__zoomIn | 元素从中心放大显示 |
| animate__shakeX | 元素沿X轴左右抖动 |
动态控制动画触发
实际开发中经常需要滚动到元素位置或者点击按钮时才触发动画，这时候可以通过JavaScript动态添加animated类和具体动画类：
// 点击按钮触发动画
document.getElementById('triggerBtn').addEventListener('click', function() {
const target = document.getElementById('animateTarget');
// 先移除已有的动画类避免重复触发无效
target.classList.remove('animate__animated', 'animate__fadeInUp');
// 触发重排让类移除生效
void target.offsetWidth;
// 重新添加动画类
target.classList.add('animate__animated', 'animate__fadeInUp');
});通过这种方式可以灵活控制动画的触发时机，满足不同场景的交互需求。只要掌握animated类和具体动画类的搭配逻辑，就能快速用Animate.css实现各类网页动效，提升页面的交互体验。
Animate.cssanimated类CSS动画前端动画实现网页动效修改时间：2026-06-06 05:23:46