关键帧必须在使用前加载且命名准确，否则动画静默失败；需确保@keyframes声明顺序优先、路径正确、大小写一致、无重复覆盖，并避免@import阻塞及压缩重命名。
动画关键帧定义必须在使用前加载
浏览器不会预解析 @keyframes，如果动画规则写在 style 标签或 CSS 文件末尾，而 animation-name 在前面就已生效（比如通过 JS 立即添加 class），动画会静默失败——既不播放，也不报错。
- 把
@keyframes声明放在所有用到它的animation规则之前（同文件内） - 若拆分文件，确保关键帧 CSS 在动画样式 CSS 之前被
<link>引入，顺序不能颠倒 - 用
document.styleSheets检查加载顺序时，注意动态插入的 sheet 默认追加到末尾，可能破坏依赖
分离关键帧到独立 CSS 文件的路径写法
单独抽离 @keyframes 到 animations.css 是可行的，但路径引用和构建工具行为会影响实际效果。重点不是“能不能”，而是“引对没”。
- HTML 中用
<link rel="stylesheet" href="css/animations.css">，路径必须相对于 HTML 文件，不是相对于当前 CSS - Webpack/Vite 等工具里，如果
animations.css被@import或url()引入，需确认是否启用css-loader的importLoaders或 PostCSS 插件支持嵌套@import - 不要用
@import url(./animations.css)放在主 CSS 里——它会阻塞渲染且无法并行加载，还可能因作用域问题让关键帧不可见
JS 动态触发动画时，关键帧名大小写与拼写必须完全一致
animation-name 是区分大小写的字符串匹配，JS 设置 class 或内联 style.animationName 时，一个字母错就等于没定义。
- 检查浏览器开发者工具的
Computed面板：若animation-name显示为none，大概率是名字拼错或未加载 - 避免用变量拼接关键帧名，例如
el.style.animationName = `fade-${direction}`，除非你 100% 控制了所有生成值且对应@keyframes已存在 - 构建后 CSS 若启用了压缩（如 cssnano），默认不会修改
@keyframes名，但某些配置可能重命名——确认keyframes: false在压缩选项中显式关闭
多个关键帧文件共存时，同名会覆盖而非合并
CSS 中重复的 @keyframes slideIn 声明，后加载的会完全替换先加载的，不会叠加帧或取并集。这在微前端、组件库混用场景下容易引发意料外的行为。
- 团队协作时，约定命名空间前缀，比如
@keyframes mylib-slideIn、@keyframes thirdparty-bounce - 用
!important无法影响@keyframes定义本身，它只作用于属性声明，别试 - 如果用 CSS-in-JS（如 Emotion），其自动哈希 keyframes 名可规避冲突，但纯 CSS 环境下必须靠人工命名隔离
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
