CSS动画基础入门_@keyframes关键帧的定义与调用

一个生效的@keyframes规则需满足：名称无空格/特殊符、至少含from/to或百分比节点、属性值可插值；animation-name须完全匹配且大小写一致；必须设置animation-duration且不为0s；兼容旧版需添加@-webkit-keyframes等前缀。

怎么写一个能生效的 @keyframes 规则

浏览器只认严格符合语法的 @keyframes 块，漏掉花括号、拼错 from/to、或者在规则里写 display: none 这类不支持动画的属性，都会让整个关键帧静默失效——查不到报错，但动画就是不动。

• @keyframes 名字不能含空格或特殊符号，推荐用 slideIn 而不是 slide in 或 slide-in（后者虽部分浏览器支持，但 safari 旧版会忽略）
• 必须至少定义一个关键帧节点：from、to 或百分比值（如 50%），空规则会被直接丢弃
• 动画属性只支持可计算、可插值的值，比如 opacity、transform、color；height 虽然能动，但设为 auto 就会卡在初始帧，得用具体数值或 max-height 替代

animation-name 对不上怎么办

这是最常被忽略的连接断点：@keyframes 定义的名字和 animation-name 的值必须**完全一致**，包括大小写。css 是区分大小写的，fadeIn 和 fadein 是两个不同动画。

• 检查是否在 @keyframes 外部多写了分号，比如 @keyframes fade { ... }; —— 分号会让规则提前终止，后续样式表里的 animation-name: fade 就找不到目标
• 如果用 CSS-in-js 或构建工具（如 postcss），确认它没自动哈希或重命名 @keyframes 名称；webpack 的 css-loader 默认开启 modules 时，局部作用域会切断引用
• 浏览器开发者工具的 Computed 面板里看不到 animation-name 值？先看 Styles 面板里该属性是否被划掉——可能是拼写错误，也可能是层叠被更高优先级规则覆盖

为什么加了 animation 却没触发

关键帧定义了，名字也对上了，但元素还是纹丝不动，大概率是缺少「触发条件」：CSS 动画不会主动播放，它依赖属性变化或显式声明来启动。

• 确保元素有 animation-duration（哪怕设成 0.01s），值为 0s 或省略时，动画不执行
• 检查是否被 animation-play-state: paused 锁住，尤其是 JS 动态控制后忘了恢复
• 父元素设了 overflow: hidden 且动画涉及位移时，可能裁剪掉过渡过程，看起来像“没动”；用 outline 或临时加 border 确认元素实际位置是否变化
• 刚插入 dom 的元素，如果立即加 animation 类名，部分浏览器（特别是 chrome）会跳过首帧；加个 setTimeout(() => el.classList.add('animate'), 0) 或用 el.offsetHeight 强制重排可绕过

IE 和老版 Safari 对 @keyframes 的兼容陷阱

IE10+ 支持标准写法，但必须带 -ms- 前缀；Safari 8 及更早版本要求 @-webkit-keyframes，而且不支持 from/to，只认百分比写法。

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

• 别只写 @keyframes 就以为万事大吉，生产环境至少补一行 @-webkit-keyframes，内容完全一致
• Safari 5.1–6.0 不支持 animation-fill-mode: forwards，动画结束后样式会回退，得用 JS 监听 animationend 手动设最终态
• 所有前缀版 @keyframes 必须放在标准版之前，否则某些旧引擎会忽略后面的规则
• 如果用 Autoprefixer，确认配置里 browsers 包含目标环境，例如 "> 1%, last 2 versions, IE >= 10"

关键帧本身没那么难，难的是它藏在样式链深处，一环断就全黑盒。调试时先盯死三件事：名字拼对没、duration 有没、浏览器到底读到哪条规则——其他都是衍生问题。