在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来实现不同阶段的运动节奏：

企业级AI数据表格智能体平台

@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），并无限循环。

基本上就这些。合理划分关键帧、分配时间比例、设置缓动函数，就能实现丰富而可控的多阶段动画效果。不复杂但容易忽略细节，比如百分比必须覆盖整个周期，否则浏览器会自动补全。