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 动画面板里点开曲线预览，鼠标悬停看实时坐标；别只信设计稿给的数值
事情说清了就结束。简写省事，但每次改都得心里默念一遍那八个子属性的顺序，不然就是半夜线上动画突然不执行。
