animate.css动画不生效主因是v4+版本需手动补全animation-duration和animation-fill-mode，且类名前缀为animate__animated/animate__bounce，非v3的animated/bounce；元素还需可见并处于渲染流中。
link 引入 animate.css 后动画类不生效？检查这几点
直接用 加载 animate.css 本身没问题，但常见失效根本原因不是引入方式，而是类名没写对、没加触发条件，或 CSS 优先级被覆盖。
animate.css 的 class 必须配合 animation-duration 和 animation-fill-mode 才能显效
新版 animate.css（v4+）默认只定义 @keyframes，所有动画类（如 animate__bounce）是纯“触发器”，不带时长、填充模式等基础属性。必须手动补全，否则浏览器不会播放动画。
- 必须显式设置
animation-duration（例如1s），否则默认为0s，动画瞬间完成 - 必须设置
animation-fill-mode: both，否则动画结束就回退到初始状态，视觉上像没动 - 推荐写法：
class="animate__animated animate__bounce"+ 对应 CSS 规则（或内联 style）
CDN 链接是否匹配你用的版本？v3 和 v4 类名前缀不同
v3 版本类名是 animated bounce，v4+ 改为 animate__animated animate__bounce。用错前缀会导致完全不生效，且控制台无报错。
确认你引入的是哪个版本：
立即学习“前端免费学习笔记（深入）”；
如果用了 v4 的 CDN，但还写 class="animated bounce"，那必然无效。
元素默认不可见？display: none 或 visibility: hidden 会阻断动画
animate.css 依赖元素处于渲染流中。以下情况动画不会触发：
- 元素初始为
display: none→ 动画不会启动，需先设为block等可见值再加动画类 - 父容器有
overflow: hidden且动画位移超出边界 → 看似“没动”，其实是被裁剪了 - 使用了
visibility: hidden→ 元素占位但不可见，动画帧仍执行，但你看不到
调试建议：临时加 border: 1px solid red 查看元素是否真实渲染、位置是否异常。
最常被忽略的一点：v4+ 的 animate__animated 类本身不包含 animation 声明，它只是个开关；真正起作用的是你后续叠加的 animate__bounce 这类具体动画名 —— 但它们都依赖你额外提供的时长和填充模式。没配这两项，等于按下了播放键却没通电。
