核心属性：把一段 @keyframes 跑起来

一个 CSS animation = 一组 @keyframes 关键帧 + 八个 animation-* 子属性来控制播放方式。本页把八个子属性逐个讲清，再补上简写；末尾介绍第九个属性 animation-composition：当动画值与元素底样式同名相撞时如何合成。页内每个循环动画都各自带播放 / 暂停开关，不依赖全局控制。

1 · animation-* 的八个子属性

animation-name——@keyframes 指定的关键帧名称；none 表示无动画（不建议用关键字做 name)。

animation-duration——一个周期（one cycle)的时长，默认 auto（即 0)。

• 设为 0 时仍会触发 animationstart / animationend 事件。
• 在 scroll-driven animation 里 auto 覆盖整个周期，设具体值无效（Firefox 下需 animation-duration: 1ms 才生效)。

animation-timing-function——缓动函数，决定关键帧之间如何插值。

• 关键字与函数：linear（= linear(0, 1))/ linear() / ease / ease-in / ease-out / ease-in-out / cubic-bezier(x1, y1, x2, y2)。
• linear() 取多个等间距控制值，相当于手写一张缓动查找表——可把真实弹簧物理烘焙进纯 CSS：见 用 linear() 实现 spring。
• 步进：step-start / step-end / steps(n, jump-start | jump-end | jump-both | jump-none)；其中 jump-start 跳过第一帧、jump-end 跳过最后一帧、jump-both 两端都跳、jump-none 都不跳。
• steps() 最典型的应用是雪碧图逐帧动画，单独成页：见 逐帧雪碧图与 object-view-box。
• 在线工具：cubic-bezier 生成器 · linear() 生成器。

@keyframes 里不同时间段还可各写一条 timing-function 自定义。下面这个方块每 25% 换一种缓动，一个周期里依次是 linear、ease、ease-in、ease-out：

steps(n, jump-none) 把一个周期切成 n 个离散帧，配合逐帧平移 background-position 即得翻页书式的雪碧图动画。下面左边是 29 帧的心形、右边是 3 帧的小图：

animation-delay——从加载完成到动画开始的延时；支持负值（表示从「已经跑了 |value| 时间」的位置开始)；单位 s / ms，默认 0。

animation-iteration-count——重复次数，默认 1:n | infinite。

animation-direction——每轮跑完是回到起点重来，还是反向跑：normal（默认)/ reverse / alternate / alternate-reverse。

animation-fill-mode——动画开始前 / 结束后,@keyframes 里的样式对元素的影响。

• none（默认)：开始前（delay 期间)与结束后都用元素本来的样式。
• backwards：开始前就套用动画的起始帧样式。
• forwards：结束后保持动画的结束帧样式。
• both = backwards + forwards。

animation-play-state——暂停 / 恢复：running | paused。下面这个奔跑的小人，点一下即在两态间切换，直观对应这个属性：

2 · 简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

3 · animation-composition

当 @keyframes 里某个属性（如 transform)和元素本来就有的同名样式相撞时，animation-composition 决定二者怎么合并。下面三块底样式都是 translate(-50px) scale(0.5)，动画终点都是 translate(50px) scale(2)，只是合成方式不同，运动幅度与终态就不一样。

• replace（默认)——动画值直接替换底样式。
• accumulate——值累积（同名分量按各自的累积规则合并后再作用)。
• add——效果叠加（动画值追加在底样式之后，对 transform 即列表串接)。