引入animate.css后部分元素无动画效果，主要是因类名使用不规范（v4+需同时加animate__animated和animate__xxx）、加载时机不当（如DOM未就绪或元素初始隐藏）或样式被覆盖。
如果引入 animate.css 后只有部分元素有动画效果，大概率是类名使用不规范或加载时机/作用域出了问题。核心在于：animate.css 只提供 CSS 规则，**不会自动触发动画**，必须手动给元素添加正确的类名，并确保它处于可动画状态。
✅ 正确引入 animate.css 的方式
推荐使用 CDN（最新版 v4+）：
cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">注意：
- v4+ 版本默认使用 animate__ 前缀（如 animate__bounce），不是旧版的 animated bounce；
- 若用的是 v3 或更早版本，类名无前缀，但已停止维护，建议升级。
✅ 必须同时添加的两个类名（v4+）
v4 起要求元素至少带两个类：
- animate__animated —— 基础动画开启类（必加，否则无效果）
-
animate__xxx —— 具体动画名，如
animate__fadeInUp、animate__pulse
❌ 错误写法：没效果！缺 animate__animated
✅ 正确写法：这才生效
✅ 动画触发时机：不是“一加就动”
animate.css 的动画默认是“定义即播放”——页面加载时会立即执行一次。所以常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- 元素初始是
display: none或visibility: hidden→ 动画无法触发（DOM 渲染前就被隐藏了） - 动画类在 DOM 加载完成前就加上了 → 浏览器还没读到 CSS，忽略
- 用 JS 动态添加类，但没等 CSS 加载完（尤其 CDN 异步加载时）→ 类加了，规则还没生效
✅ 解决建议：
- 确保元素初始是可见的（opacity: 0 + visibility: visible 更安全）；
- JS 添加类时，放在 DOMContentLoaded 或 window.onload 后；
- 或用 setTimeout 延迟 10ms 再加类（小技巧，兼容性好）。
✅ 检查是否被其他样式覆盖
以下情况会导致动画“看起来没动”：
- CSS 中写了
animation-play-state: paused或animation: none - 父容器设置了
overflow: hidden，裁掉了位移动画（如animate__slideInRight） - 元素本身有
transform、opacity等内联样式，权重高于 animate.css 的声明
? 小技巧：打开浏览器开发者工具 → 找到该元素 → 在 Styles 面板里搜索 animate__，确认对应动画规则是否被划掉（被覆盖）或未加载。
基本上就这些。重点就三条：引入正确、类名配对、触发时机合理。不复杂但容易忽略细节。
