css动画不生效是什么原因_css动画失效常见问题排查

动画失效的首要原因是 animation-name 与 @keyframes 名称不匹配，哪怕一个空格、大小写或连字符错误（如 slide-in 与 slide_in），浏览器均静默跳过且不报错。

animation-name 和 @keyframes 名称不匹配

这是最隐蔽也最常被忽略的失效原因：浏览器不会报错，只会静默跳过动画。哪怕只差一个空格、大小写或连字符（比如 @keyframes slide-in 对应 animation-name: slide_in），动画就彻底“消失”。

• 用开发者工具 → 「Styles」面板检查元素是否真的应用了 animation-name，再点击右侧动画图标，看是否提示 “No keyframes found”
• @keyframes 定义必须出现在使用它的 CSS 规则之前；动态插入样式时，要先注入 @keyframes，再注入带 animation-name 的规则
• 构建工具（如 Webpack + CSS-in-JS）可能剥离未引用的 @keyframes，需确认是否被 Tree-shaking 误删

关键动画属性缺失或设为默认值

CSS 动画不是“有 name 就能动”，它依赖一组隐式前提条件。漏掉任意一项，动画就卡在起点不动。

• animation-duration 必须显式设置（如 1s），否则默认为 0s，动画瞬间完成，肉眼不可见
• animation-fill-mode 推荐设为 forwards 或 both，否则动画结束立即回退到初始状态，看起来像“没动过”
• 若元素初始是 display: none 或 visibility: hidden，动画根本不会触发——它需要处于渲染流中才能启动

animate.css v4+ 类名和触发方式写错

新版 animate.css（v4.1.1）不是“引入即用”，它把动画拆成了「开关」+「动作」两部分，类名也全换成了双下划线前缀，旧写法全部失效。

MOKI

MOKI是美图推出的一款AI短片创作工具，旨在通过AI技术自动生成分镜图并转为视频素材。

下载

• 必须同时加两个 class：animate__animated（基础开关） + animate__bounce（具体动作），缺一不可
• CDN 地址必须匹配版本：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css（v4+）≠ /3.7.2/（v3）
• v4+ 不自带 animation-duration 和 animation-fill-mode，得手动补上，例如：

  .box {
    animation-duration: 1s;
    animation-fill-mode: both;
  }

伪元素、inline 元素或定位导致 transform 失效

很多 hover 动画或逐字动画看着颜色变了、文字动了，但缩放/位移没反应——问题不在动画本身，而在元素“没资格动”。

立即学习“前端免费学习笔记（深入）”；

• 等 inline 元素默认不支持 transform，必须加 display: inline-block 或 display: block 才能生成 layout box
• 伪元素（::before/::after）的 transition 必须写在宿主选择器里，不能写在伪元素规则内部；animation 可以写在里面，但必须配 forwards 保持终态
• absolute/fixed 定位元素若没进入合成层，动画可能卡顿或不触发，可加 transform: translateZ(0) 或 will-change: transform 强制 GPU 加速