CSS动画简写属性详解_在一个声明中配置所有关键帧参数

animation简写仅覆盖8个子属性：name、duration、timing-function、delay、iteration-count、direction、fill-mode、play-state；顺序固定，漏写会左移覆盖后续值，且隐式重置未指定项。

animation 简写属性到底覆盖哪些子属性

它不是“把所有 animation-* 都塞进去就行”，而是有严格顺序和隐式重置规则。漏掉某个值，浏览器会用默认值填空，但可能悄悄清掉你之前设好的 animation-fill-mode 或 animation-play-state。

简写只控制这 8 个： animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。其余如 animation-composition（较新）必须单独写。

• 顺序不能乱：animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
• 省略中间某项？后面所有值都会左移——比如写了 animation: slide 1s ease;，那 delay 就变成 ease，iteration-count 变成默认 1，而 fill-mode 直接回退到 none
• animation: none 是特例，它清空全部，包括 name；但 animation: inherit 不会重置未继承的子属性

为什么 animation-delay 写成 0s 和 0 会有兼容差异

老版本 safari（ios 9.3 / macos 10.11）会把无单位的 0 当作无效值，直接忽略整条声明；而 0s 能稳过。这不是 bug，是 css 规范里明确要求时间类值必须带单位（除非为 0），但部分引擎过去宽松处理了。

• chrome/firefox 现在也逐步收紧：animation-delay: 0 在 DevTools 里会标黄警告
• 真正安全的写法只有 0s 或 0ms；0.0s 也行，但没必要
• 如果用 postcss 或构建工具自动补单位，注意它通常只处理 0 → 0px 这类，对 animation-delay 不生效

animation-direction: alternate-reverse 的实际行为

它不是“先正向播一遍，再反向播一遍”，而是从关键帧终点开始反向播放第一轮——也就是说，动画起始视觉状态 = @keyframes 里 100% 定义的样子。

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

• 对比：alternate 第一轮从 0% → 100%，第二轮从 100% → 0%
• alternate-reverse 第一轮就从 100% → 0%，第二轮才从 0% → 100%
• 如果你依赖初始态是 0%，又用了 alternate-reverse + animation-fill-mode: backwards，结果仍是 100% 的样式——因为 backwards 取的是“第一轮播放起点”，即 100%

animation-timing-function 用 cubic-bezier 时的常见失控行为

贝塞尔曲线的控制点超出 [0, 1] 范围（比如 cubic-bezier(0.2, -0.5, 0.8, 1.5)）是合法的，但会导致动画“冲过头”或“回弹”，尤其在移动端 webkit 引擎下容易触发渲染抖动。

• 超出范围本身不报错，但 Safari iOS 15 前对 y 值 > 1 的处理不稳定：有时缓动变平，有时直接卡顿
• 如果用 animation-timing-function: step-start 或 step-end，注意它们不支持简写里混用——animation: fade 0.3s step-start ease; 中的 ease 会被忽略
• 调试建议：在 DevTools 动画面板里点开曲线预览，鼠标悬停看实时坐标；别只信设计稿给的数值

事情说清了就结束。简写省事，但每次改都得心里默念一遍那八个子属性的顺序，不然就是半夜线上动画突然不执行。