使用@keyframes定义关键帧并结合animation属性可实现多阶段动画。1. @keyframes设置0%、50%、100%等关键状态，描述样式变化过程；2. animation将动画应用到元素，控制时长、延迟、重复等行为；3. 通过百分比划分阶段，明确各节点样式，如平移、变色、旋转；4. 可在关键帧内设置animation-timing-function，实现不同阶段的缓动效果，如ease-in后ease-out；5. 使用animation-fill-mode保留最终状态，animation-iteration-count控制循环次数。合理分配时间比例与缓动函数，能精准控制动画节奏，提升视觉表现。
在CSS中，使用@keyframes配合animation属性可以实现多阶段动画控制。这种方式不仅灵活，还能精确控制元素在不同时间点的样式变化。
理解 keyframes 与 animation 的关系
@keyframes定义动画的关键帧，描述元素从一个状态到另一个状态的变化过程。animation则是将这些关键帧应用到具体元素上，并控制播放方式。
例如，让一个盒子先向右移动，再变色，最后旋转：
@keyframes multiStage {
0% { transform: translateX(0); background: red; }
50% { transform: translateX(100px); background: blue; }
100% { transform: translateX(100px) rotate(180deg); background: green; }
}
.box {
width: 50px;
height: 50px;
background: red;
animation: multiStage 3s ease-in-out;
}
在这个例子中，动画分三个阶段：0%-50%平移并变色，50%-100%继续旋转。关键帧百分比决定了每个状态的时间分布。
立即学习“前端免费学习笔记（深入）”；
拆分复杂动画为多个关键帧阶段
当需要更清晰的阶段划分时，可明确标注多个中间节点：
@keyframes stagedAnimation {
0% { opacity: 0; transform: scale(0.5); }
33% { opacity: 1; transform: scale(1); }
66% { background: orange; box-shadow: 0 0 20px gold; }
100% { transform: scale(1.2) rotate(45deg); }
}
这种结构便于维护，每个阶段职责分明：入场、展示、高亮、结束动作。通过调整百分比，可以控制各阶段持续时间。
利用 animation-timing-function 实现阶段差异化缓动
单一的ease可能无法满足多阶段需求。可通过在关键帧中分别设置animation-timing-function来实现不同阶段的运动节奏：
@keyframes variedEasing {
0% { left: 0; animation-timing-function: ease-in; }
50% { left: 200px; animation-timing-function: ease-out; }
100% { left: 100px; }
}
第一段加速前进，第二段缓慢回弹。注意：animation-timing-function写在关键帧内部，影响的是“从此帧到下一帧”的过渡曲线。
控制动画执行行为
通过animation复合属性或单独设置，可精细控制动画表现：
- animation-duration：总时长，影响各阶段实际耗时
- animation-delay：延迟启动，可用于序列化多个元素动画
-
animation-iteration-count：重复次数，如
infinite -
animation-fill-mode：决定动画外时间的状态，常用
forwards保留最终态
例如：
.animated {
animation: stagedAnimation 4s both infinite;
}
表示动画保持首尾状态（both），并无限循环。
基本上就这些。合理划分关键帧、分配时间比例、设置缓动函数，就能实现丰富而可控的多阶段动画效果。不复杂但容易忽略细节，比如百分比必须覆盖整个周期，否则浏览器会自动补全。
