CSS animation不支持自动串联关键帧，多段动画需通过多个独立animation声明配合animation-delay错峰触发，并设fill-mode为forwards以保持状态。
animation不能直接拆分关键帧，得靠多个动画叠加
CSS里animation本身不支持“一段播完自动切下一段”这种流程控制，所谓“多段动画序列”，本质是多个独立animation在同一个元素上并行或错峰运行。浏览器按animation-name逐个解析关键帧，不会自动串联。
常见错误现象：animation: fade-in 1s, slide-up 1s;写在一起，但两个动画都从0%开始、同时触发，根本看不出“先淡入再上滑”。
- 必须用
animation-delay手动错开启动时间，比如第二段加animation-delay: 1s - 各段动画的
animation-fill-mode要设为forwards，否则前一段结束立刻回退到初始态 - 如果某段需要保持最终状态、又不影响下一段起点，得确保关键帧终点值和下一段起点值一致（比如第一段结束
opacity: 1，第二段起始也写opacity: 1）
用@keyframes定义独立动画片段更可控
把每段逻辑拆成单独的@keyframes，比塞进一个大关键帧里调试成本低得多。比如做加载动效：旋转→缩放→位移，三段就该有三个名字，而不是全压在loading-sequence里。
使用场景：需要复用某一段（如所有按钮hover都带缩放）、或某段要单独暂停/重播时，独立命名是唯一办法。
立即学习“前端免费学习笔记（深入）”；
- 命名别用
step1/step2这种，用语义名，如fade-in、slide-from-bottom - 各段持续时间之和 ≠ 总时长，因为
animation-duration是各自算的，靠delay对齐节奏 - 注意兼容性：IE10+才支持多个
animation同时声明，老版本得用JS降级
```css
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-up {
from { transform: translateY(20px); }
to { transform: translateY(0); }
}
.element {
animation: fade-in 0.3s forwards, slide-up 0.4s 0.3s forwards;
}
```animation-play-state无法精准控制单一段落
很多人想用animation-play-state: paused中途停在第二段，结果发现整个元素所有动画都停了——因为它是作用于整个animation声明的，不分段。
性能影响：强行用JS监听animationend事件再启下一段，看似灵活，但频繁操作样式会触发重排，尤其在低端安卓机上容易掉帧。
- 真要分段控制，优先考虑
animationiteration+animation-direction: alternate组合，适合循环类序列 - 复杂交互序列（比如用户点击才触发第三段），建议用
class切换代替纯CSS控制，CSS只管视觉，逻辑交给JS - 别在
@keyframes里写太多!important或内联style，会导致关键帧被覆盖失效
移动端要注意timing-function和duration的配合
在iOS Safari或部分安卓WebView里，如果某段动画duration太短（比如0.1s）又配了cubic-bezier(.17,.67,.83,.67)，可能出现跳变甚至直接不播——不是bug，是渲染引擎优化掉了“不可见”的过渡。
容易踩的坑：用ease-in-out做首尾衔接时，两段动画的缓动曲线不匹配，导致速度突变，看起来像卡顿。
- 序列中相邻两段的
timing-function尽量一致，或显式写成linear保底 -
duration别低于0.15s，尤其涉及transform或opacity以外的属性（比如height） - 真要微调节奏，改
animation-timing-function比硬调duration更可靠
实际做多段序列，最难的不是写法，是把设计稿里“自然流畅”的感觉，拆成可测量的duration、delay和timing-function。人眼对0.05s的误差不敏感，但对速度突变极其敏感——这点常被忽略。
