使用Animate.css可快速为网页元素添加动画效果，只需引入库文件并添加相应类名即可实现，如animate__animated与animate__fadeIn组合实现淡入效果，支持延迟、速度调节及重复播放等控制，结合JavaScript可动态触发动画，适用于提示、入口动画等场景。
使用 Animate.css 制作动画效果，是一种快速、简单为网页元素添加交互动画的方式。它是一个预设好的 CSS 动画库，无需编写复杂的 keyframes 或 transition 规则，只需为 HTML 元素添加对应的类名即可实现动画。
引入 Animate.css 库
在开始使用前，需要先将 Animate.css 引入项目中。可以通过 CDN 方式加载：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">也可以通过 npm 安装：
npm install animate.css然后在项目样式文件或 JS 中导入：
立即学习“前端免费学习笔记（深入）”；
@import 'animate.css';基本使用方法
要让一个元素动起来，只需要给它加上 animate__animated 和对应的动画类名。例如，让一个 div 淡入显示：
<div class="animate__animated animate__fadeIn">Hello, 我会淡入！</div>常用动画类包括：
- animate__bounce - 跳跃效果
- animate__flash - 闪烁
- animate__pulse - 脉冲放大
- animate__rubberBand - 橡皮筋拉伸
- animate__shakeX / animate__shakeY - 水平或垂直抖动
- animate__zoomIn - 放大进入
- animate__slideInLeft - 从左侧滑入
控制动画行为
Animate.css 提供了一些辅助类来调整动画表现：
- animate__delay-1s：延迟 1 秒执行动画
- animate__slow、animate__faster：调节动画速度
- animate__repeat-2：重复两次（最多支持 repeat-1 到 repeat-3）
- animate__infinite：无限循环动画
示例：一个无限跳动且延迟出现的按钮：
<button class="animate__animated animate__bounce animate__infinite animate__delay-2s">点我！</button>结合 JavaScript 触发动画
通常我们不会一开始就播放动画，而是通过用户交互（如点击、滚动等）触发。可以使用 JavaScript 动态添加类名：
const element = document.querySelector('#myElement');element.classList.add('animate__animated', 'animate__bounce');
注意：如果想重复播放同一个动画，需要先移除类再重新添加：
function replayAnimation() {const el = document.querySelector('#myElement');
el.classList.remove('animate__bounce');
void el.offsetWidth; // 强制重排，使动画可重新触发
el.classList.add('animate__bounce');
}
基本上就这些。Animate.css 适合用于提示、入口动画、按钮反馈等场景，不复杂但容易忽略细节，比如类名前缀和重播机制。掌握好用法后，能显著提升页面的视觉体验。
