Animate.css 是一个基于 CSS3 的动画库，通过添加类名实现元素的淡入、抖动、弹跳等效果，支持 CDN 引入或 npm 安装，结合 JavaScript 可动态控制动画触发，适用于提示反馈与页面动效，需注意合理使用避免影响性能。
Animate.css 是一个流行的 CSS 动画库，使用它无需编写复杂的动画代码，只需为元素添加对应的类名，就能快速实现流畅的动画效果。它基于 CSS3 的 @keyframes 实现，兼容现代浏览器，非常适合用于网页中的提示、按钮反馈、页面进入出场等场景。
引入 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安装后在项目中导入：
立即学习“前端免费学习笔记（深入）”；
@import 'animate.css';基本使用方法
要让一个元素应用动画，只需要给它加上 animate__animated 和对应的动画类名。例如实现一个淡入效果：
<h1 class="animate__animated animate__fadeIn">欢迎来到我的网站</h1>常用动画类包括：
- animate__bounce - 跳跃效果
- animate__flash - 闪烁效果
- animate__pulse - 脉冲放大
- animate__rubberBand - 橡皮筋拉伸
- animate__shakeX / animate__shakeY - 水平或垂直抖动
- animate__swing - 摇摆效果
- animate__tada - 类似弹出强调
- animate__wobble - 扭动效果
控制动画行为
可以通过添加额外类来调整动画的执行方式：
- animate__delay-2s：延迟 2 秒开始动画
- animate__slow、animate__slower：降低动画速度
- animate__repeat-2：重复 2 次（最多支持 repeat-3）
- animate__infinite：无限循环动画
示例：一个无限抖动且延迟 1 秒出现的按钮：
<button class="animate__animated animate__shakeX animate__infinite animate__delay-1s">警告！</button>结合 JavaScript 控制动画
可以通过 JS 动态添加或移除类来触发动画。由于 animate.css 动画默认只播放一次，重新触发需要先移除类再添加：
const element = document.querySelector('#myElement');element.classList.add('animate__animated', 'animate__bounce');
// 动画结束后可选择移除类以再次触发
element.addEventListener('animationend', () => {
element.classList.remove('animate__animated', 'animate__bounce');
});
这样可以实现用户点击时再次播放动画的效果。
基本上就这些，Animate.css 简单易用，适合快速提升页面交互感。关键是熟悉常用类名并合理控制动画节奏，避免过度使用影响用户体验。
