动画不生效主因是link未引入或class名错误；需确认CDN地址正确、状态码200、含rel="stylesheet"；v4+须同时加animate__animated和animate__xxx类，且需手动触发。
动画不生效，大概率是 link 标签没正确引入 或 class 名写错了。animate.css 的类名有严格命名规则，且新版（v4+）和旧版（v3）差异很大，容易踩坑。
检查 link 标签是否正确引入
确保你在 <head> 中用了官方推荐的 CDN 地址，并且没有被拦截或 404：
- v4+（推荐）：用
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css - v3（已停止维护）：用
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css - 确认浏览器开发者工具（F12 → Network）里该 CSS 文件状态码是 200，且内容可查看
- 不要漏掉
rel="stylesheet"和href属性
确认 class 名完全匹配 animate.css 版本
v4+ 要求必须同时加 animate__animated 基础类 + 具体动画类（如 animate__bounce），缺一不可：
- ✅ 正确写法：
class="animate__animated animate__bounce" - ❌ 错误写法：
class="bounce"、class="animated bounce"（这是 v3 写法） - v4+ 所有动画类都带
animate__前缀，比如animate__fadeInUp、animate__zoomIn - 可查官网文档确认：https://www.php.cn/link/cf26515238e08ce814a967ddc774bf5c
注意触发条件和默认行为
animate.css 只提供 CSS 动画定义，不会自动播放，需要手动触发：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时立即动：直接写在 HTML 里即可（前提是 DOM 已就绪）
- 滚动进入后动：需配合 JS 监听 scroll 或使用 IntersectionObserver
- 点击后动：用 JS 切换 class，例如
element.classList.add('animate__animated', 'animate__swing') - 重复动画需加
animate__repeat类，或用 CSSanimation-iteration-count
排除常见干扰因素
以下情况会导致动画“看不见”或“不动”：
- CSS 优先级冲突：其他样式覆盖了
animation或visibility，用开发者工具检查 computed 样式 - 父元素设置了
overflow: hidden，裁掉了动画过程（如 bounce、slide 出界部分） - 元素初始为
display: none或visibility: hidden，动画无法触发 - 使用了
prefers-reduced-motion: reduce系统设置，animate.css v4+ 默认禁用动画（可加data-aos="..."或手动重写@media (prefers-reduced-motion)
