如何用css animation与keyframes实现多阶段动画控制

在网页动效开发中，css animation配合keyframes可以实现复杂的多阶段动画效果，通过定义不同时间节点的样式状态，能够让元素按照预设的轨迹和节奏完成动态变化，不需要依赖JavaScript就能实现丰富的交互反馈。

keyframes基础语法

keyframes用于定义动画的关键帧，也就是动画在不同时间点的样式状态。它的基本结构是使用@keyframes关键字后接动画名称，内部通过百分比或者from、to来划分阶段。

其中from等价于0%，代表动画起始状态，to等价于100%，代表动画结束状态，中间的百分比可以自定义，用来划分多个动画阶段。比如0%到30%是第一个阶段，30%到70%是第二个阶段，70%到100%是第三个阶段，每个阶段可以设置不同的样式属性。

基础关键帧示例

/* 定义一个名为multi_stage的动画 */
@keyframes multi_stage {
  /* 起始阶段，元素在左上角，透明度为0 */
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  /* 第一阶段结束，元素移动到右侧，透明度变为1 */
  30% {
    transform: translate(200px, 0);
    opacity: 1;
  }
  /* 第二阶段结束，元素移动到右下角，背景色变为蓝色 */
  70% {
    transform: translate(200px, 200px);
    background-color: #2196f3;
  }
  /* 动画结束，元素回到起始位置，背景色变回红色 */
  100% {
    transform: translate(0, 0);
    background-color: #f44336;
  }
}

animation属性配置

定义好keyframes之后，需要通过animation相关属性将动画绑定到目标元素上，同时控制动画的播放效果。常用的animation属性包括以下几个：

• animation-name：指定要使用的keyframes动画名称，需要和@keyframes后的名称一致
• animation-duration：设置动画完成一个周期所需要的时长，单位为s或者ms
• animation-timing-function：设置动画的速度曲线，比如ease、linear、cubic-bezier()等
• animation-delay：设置动画延迟多久开始播放
• animation-iteration-count：设置动画播放的次数，infinite代表无限循环
• animation-direction：设置动画是否反向播放，比如alternate代表奇偶次循环方向相反
• animation-fill-mode：设置动画执行前后目标元素的样式，比如forwards代表动画结束后保持最后一帧的样式

属性简写方式

animation支持简写形式，按照顺序依次设置上述属性即可，不需要的属性可以省略，但是animation-name和animation-duration必须设置。

/* 简写形式绑定动画 */
.target-element {
  width: 100px;
  height: 100px;
  background-color: #f44336;
  /* 动画名称 时长 速度曲线 延迟 播放次数 方向 填充模式 */
  animation: multi_stage 3s ease 0s infinite alternate forwards;
}

多阶段动画实战示例

下面通过一个具体的案例展示多阶段动画的完整实现，这个案例会让一个圆形元素依次完成放大、移动、变色、缩小的四个阶段动画。

HTML结构

<div class="stage-box">
  <div class="stage-element"></div>
</div>

CSS样式与动画定义

/* 容器样式 */
.stage-box {
  width: 400px;
  height: 400px;
  border: 1px solid #e0e0e0;
  margin: 20px auto;
  position: relative;
}

/* 动画元素基础样式 */
.stage-element {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ff9800;
  position: absolute;
  top: 20px;
  left: 20px;
  /* 绑定多阶段动画 */
  animation: four_stage_animate 4s ease-in-out infinite;
}

/* 四阶段动画定义 */
@keyframes four_stage_animate {
  /* 第一阶段：0%-25%，元素放大1.5倍 */
  0%, 25% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5);
  }
  /* 第二阶段：25%-50%，元素移动到右侧，背景变红 */
  50% {
    transform: scale(1.5) translateX(300px);
    background-color: #f44336;
  }
  /* 第三阶段：50%-75%，元素移动到右下角，背景变蓝 */
  75% {
    transform: scale(1.5) translate(300px, 300px);
    background-color: #2196f3;
  }
  /* 第四阶段：75%-100%，元素回到起点，缩小到原始大小，背景变回橙色 */
  100% {
    transform: scale(1) translate(0, 0);
    background-color: #ff9800;
  }
}

多阶段动画注意事项

在使用css animation和keyframes实现多阶段动画时，需要注意以下几点：

• 关键帧的百分比数值不需要连续，你可以只定义0%、50%、100%三个节点，也可以定义更多细分的节点，根据动画需求灵活调整
• 同一个百分比节点可以设置多个样式属性，这些属性会同时生效，实现复合的动画效果
• 如果需要在动画的不同阶段使用不同的速度曲线，可以在keyframes内部为每个阶段单独设置animation-timing-function，覆盖全局的配置
• 当动画设置infinite循环时，如果同时设置了alternate方向，那么奇数次循环按照关键帧正序播放，偶数次循环按照倒序播放，可以实现来回往复的动画效果
• 如果动画元素需要初始状态就和第一帧关键帧一致，可以设置animation-fill-mode: backwards，这样动画延迟期间就会应用第一帧的样式

多阶段动画的核心是通过百分比合理划分动画节点，每个节点设置对应的样式变化，再配合animation属性调整播放节奏，就能实现各种复杂的动效需求。

css_animationkeyframes多阶段动画动画控制修改时间：2026-06-19 14:45:51