动画不触发的核心原因是引入地址错误、类名前缀错误（须用animate__animated+animate__xxx）或初始不可见（需visibility:visible）。需确认CDN链接有效、Network中CSS状态为200，并确保元素同时具备基础类与动画类且初始可见。
动画不触发，通常不是库没加载成功，就是类名用错了——尤其是 缺少必要的触发条件 或 元素初始状态不符合动画要求。
确认 animate.css 已正确引入
用 引入时，确保地址有效且在 HTML 的 中：
- 推荐使用 CDN（如 jsDelivr）：
cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css"> - 检查浏览器开发者工具（F12）→ Network 标签，看 animate.min.css 是否状态为 200；若显示 404，说明路径错误或版本失效
- animate.css v4+ 默认只定义动画样式，不会自动播放，必须手动添加触发类
类名必须成对使用：基础类 + 动画类
animate.css v4 要求元素同时具备两个类：
-
animate__animated：必加的基础类（提供通用动画重置和 display 处理） -
animate__bounce、animate__fadeInUp等：具体动画效果类（注意前缀是animate__，不是旧版的animated） - 错误写法：
class="bounce"或class="animated bounce"（v4 不识别） - 正确写法：
class="animate__animated animate__bounce"
动画默认不自动播放？需手动触发或设置 visibility
v4 版本默认依赖 visibility: visible 触发。如果元素初始是 display: none 或 visibility: hidden，动画不会启动：
立即学习“前端免费学习笔记（深入）”；
- 确保元素初始是可见的（例如用
opacity: 0+visibility: visible配合animate__fadeIn） - 如需页面加载后自动播，可直接写在 HTML 中：内容
- 如需点击/滚动后播放，用 JS 添加类即可：
element.classList.add('animate__animated', 'animate__rollIn');
其他常见坑点
-
重复添加类无效：已播放过的动画，再次 add 同样的类不会重播；需先 remove 再 add，或用
animation-play-state: running控制 -
没有过渡容器：若父容器有
overflow: hidden，部分位移动画（如 slide、flip）可能被截断 -
自定义 duration/delay：可通过内联 style 或额外 class 设置：
基本上就这些。核心就两条：引入地址对、类名前缀对、初始可见性对——三者齐备，动画自然就动起来了。
