多阶段关键帧动画通过@keyframes定义0%、30%、70%、100%等节点，实现元素移动、旋转、淡出等复合效果，结合animation-delay可控制多个元素依次执行，使用transform和opacity提升性能，语义化命名和合理拆分动画有助于维护。
在CSS动画中，多阶段关键帧控制指的是通过@keyframes规则定义多个阶段的样式变化，让元素在动画过程中经历多个状态。这种方式可以实现复杂、流畅的视觉效果，比如先移动、再旋转、最后淡出。
使用@keyframes定义多阶段动画
通过设置多个百分比节点（如0%、30%、70%、100%），可以精确控制动画每一阶段的表现。
例如，一个元素可以：
- 从左侧移入（0% → 30%）
- 旋转放大（30% → 70%）
- 渐隐并停止（70% → 100%）
@keyframes multiStage {
0% {
transform: translateX(-100px) rotate(0deg);
opacity: 0;
}
30% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
70% {
transform: scale(1.2) rotate(90deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(90deg);
opacity: 0;
}
}
.animated-element {
animation: multiStage 4s ease-in-out;
}
控制动画的时间分段与缓动函数
不同阶段可配合animation-timing-function实现更自然的效果。虽然整个动画只能指定一个默认缓动，但可通过调整关键帧位置模拟分段缓动。
立即学习“前端免费学习笔记（深入）”；
技巧：将关键帧密集排列可制造“突然变化”或“暂停”感。
- 30%和31%之间快速跳变，实现瞬间切换效果
- 在70%停留较长间隔，模拟“停顿”动作
结合animation-delay与animation-fill-mode实现组合控制
当多个元素按序执行同一多阶段动画时，可通过animation-delay错开启动时间。
常用场景包括列表项依次入场、按钮逐个高亮等。
.item-1 { animation-delay: 0s; }
.item-2 { animation-delay: 0.3s; }
.item-3 { animation-delay: 0.6s; }
animation-fill-mode: both 可让元素保留动画前后的状态，避免闪回原始样式。
性能与维护建议
多阶段关键帧虽强大，但也需注意：
- 避免过度复杂的变换组合，尤其是非合成属性（如width、height）
- 优先使用transform和opacity，它们由GPU加速
- 命名关键帧语义化，如
fade-slide-scale，便于团队理解 - 必要时拆分为多个独立动画，用JavaScript协调控制
基本上就这些。合理规划关键帧节点，就能让CSS动画既有节奏感又不失性能。
