animate.css 是一个简化网页动画的 css 库，通过引入 cdn 或 npm 安装后，为元素添加 animate__animated 与对应类名（如 animate__bounce）即可实现弹跳、淡入、旋转等效果；支持通过 animate__infinite、animate__delay-2s 等类控制播放次数、延迟和速度；结合 javascript 可动态添加类实现交互触发，需注意重复播放时先移除类并强制重排以重置动画。
Animate.css 是一个流行的 CSS 动画库，它让开发者无需编写复杂的 CSS 动画代码，就能为网页元素添加流畅的动画效果。只需引入库文件，并为元素添加对应的类名，即可快速实现进入、退出、弹跳、旋转等动画。
引入 Animate.css 库
使用 Animate.css 前，需要先将其引入项目。可以通过 CDN 或 npm 安装方式引入。
常用 CDN 引入方式：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />或通过 npm 安装：
npm install animate.css --save
安装后在项目样式文件中导入：
@import 'animate.css';
基本动画类的使用方法
Animate.css 提供了大量预定义的动画类，主要分为以下几类：进入动画（attention seekers）、淡入淡出（fading）、滑动（sliding）、旋转（rotating）、缩放（zooming）和退出动画（exiting）等。
立即学习“前端免费学习笔记（深入）”；
要让元素动起来，只需给元素添加 animate__animated 和具体动画类名，例如：
<div class="animate__animated animate__bounce">弹跳效果</div>
- animate__animated：基础类，激活动画行为
- animate__bounce：实现弹跳动画
- 其他常见动画类如：animate__fadeIn、animate__rotateIn、animate__zoomOut
控制动画执行与重复
Animate.css 支持通过附加类来控制动画的播放次数、延迟和速度。
- 重复次数：使用 animate__repeat-2 让动画播放两次，也可用 animate__infinite 实现无限循环
- 延迟动画：添加 animate__delay-2s 可延迟 2 秒开始
- 调整速度：使用 animate__slow、animate__faster 控制快慢
示例：无限弹跳且每次慢速播放
<div class="animate__animated animate__bounce animate__infinite animate__slow">持续慢速弹跳</div>
结合 JavaScript 触发动画
静态添加类只能实现页面加载时的动画。若需用户交互触发（如点击按钮），可通过 JavaScript 动态添加和移除类。
注意：重复触发动画前需先移除类，否则不会重新播放。
const element = document.querySelector('#myElement');
element.classList.add('animate__animated', 'animate__fadeIn');
// 想再次触发动画时，需短暂延迟清除类
function reAnimate() {
element.classList.remove('animate__fadeIn');
void element.offsetWidth; // 强制重排
element.classList.add('animate__fadeIn');
}
基本上就这些。Animate.css 简化了前端动画实现流程，适合快速原型开发或增强用户体验。只要掌握类名结构和触发机制，就能灵活运用各种视觉效果。不复杂但容易忽略细节，比如类名前缀和重播逻辑。
