css动画库怎么引入才生效_通过link方式加载animate.css

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 这类具体动画名 —— 但它们都依赖你额外提供的时长和填充模式。没配这两项，等于按下了播放键却没通电。