CSS动画不触发的主因是animation-duration为0s或缺失；动态添加元素需强制重排或requestAnimationFrame；display切换应改用opacity+visibility；transform/opacity需独立合成层，配合will-change或translateZ(0)；fill-mode需设forwards保持终态。
动画没动，不是代码写错了，大概率是浏览器没“看见”它该动的时机或条件。
animation-duration 为 0s 时动画根本不会播放
这是最常被忽略的硬性门槛。CSS 动画必须有正数时长才能触发，animation-duration: 0s 或省略该属性，动画就静止不动。
-
animation简写中若漏掉时长（如写成animation: slideIn ease;），等价于animation-duration: 0s - 单独设置时，必须显式写
animation-duration: 0.5s;，不能用0ms（部分旧版 Safari 会失效） - 使用 CSS 自定义属性动态控制时，确保 JS 注入的值是带单位的字符串，比如
el.style.setProperty('--anim-time', '1.2s')，而非数字1.2
元素没渲染完成就调用 animation 或 transition
常见于 JS 动态插入元素后立刻加动画类，但此时元素尚未进入文档流或未触发样式计算，transition 不会捕获“初始状态”。
- 给新元素加 class 前，先强制触发重排：
el.offsetHeight;（哪怕只是读一个 layout 属性） - 更稳妥的做法是用
requestAnimationFrame延迟到下一帧：requestAnimationFrame(() => el.classList.add('animate-in')) - 对
display: none→block切换的元素，transition 不会作用于display，应改用opacity+visibility组合
transform 和 opacity 没触发硬件加速，动画卡顿
浏览器对 transform 和 opacity 的动画做了深度优化，但前提是它们不与其他布局属性（如 width、top、left）混用，且元素处于独立合成层。
- 避免在动画中同时修改
transform和margin—— 后者会触发 layout，拖垮帧率 - 对关键动画元素，可主动提升合成层：
will-change: transform;或transform: translateZ(0); - 注意
will-change不宜滥用，只在真正需要动画的元素上设置，且动画结束后建议移除（用 JS 控制）
animation-fill-mode 配置不当导致动画结束就“跳回”
默认 animation-fill-mode: none，动画一停，元素立刻恢复初始样式。这不是 bug，是设计行为。
- 想让动画停在最后一帧，必须设
animation-fill-mode: forwards; - 若同时用了
transition和animation，forwards可能覆盖 transition 的“回退”逻辑，需手动协调两者的状态边界 - 调试时可在 DevTools 的 Animations 面板勾选 “Show all animations”，实时查看 fill-mode 生效位置和最终应用样式
真正难调的往往不是语法，而是动画状态与 DOM 生命周期、合成层调度、样式计算时机之间的隐式耦合。多打开浏览器的 Layers 面板和 Rendering 设置，比反复改 @keyframes 更快定位卡顿根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
