如何实现多段顺序执行的transform过渡动画，复刻苹果移动端汉堡菜单效果

AI 小北

2026-9-29

核心原因

你当前的代码中，transform 属性内的多个变换函数会同步执行，transition 作用于整个transform属性，所以平移和旋转会同时触发，没有先后顺序。

方案1：使用独立CSS变换属性（适合现代浏览器）

现在rotate、translate都已经成为独立CSS属性，可以分别给不同属性设置过渡时序，实现排队执行的效果：

/* 两条横线的基础样式 */
.line {
  /* 第一阶段：平移先执行，时长200ms */
  transition: transform 200ms ease-in-out,
  /* 第二阶段：旋转延迟200ms执行，时长200ms */
  rotate 200ms ease-in-out 200ms;
  transform: translateY(0);
  rotate: 0deg;
}

/* 上横线激活状态 */
.line-top.active {
  transform: translateY(0.25rem);
  rotate: 45deg;
}

/* 下横线激活状态 */
.line-bottom.active {
  transform: translateY(-0.2rem);
  rotate: -45deg;
}

这个方案写法最简单，Chrome 104+、Firefox 103+以上版本都支持。

方案2：使用关键帧动画（兼容性更好）

如果需要兼容低版本浏览器，可以用@keyframes明确定义动画的两个阶段：

/* 上横线动画：前50%时间完成平移，后50%时间完成旋转 */
@keyframes topLineAnim {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(0.25rem) rotate(0deg);
  }
  100% {
    transform: translateY(0.25rem) rotate(45deg);
  }
}

/* 下横线动画 */
@keyframes bottomLineAnim {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.2rem) rotate(0deg);
  }
  100% {
    transform: translateY(-0.2rem) rotate(-45deg);
  }
}

/* 激活状态绑定动画，总时长400ms，保持动画结束状态 */
.line-top.active {
  animation: topLineAnim 400ms ease-in-out forwards;
}

.line-bottom.active {
  animation: bottomLineAnim 400ms ease-in-out forwards;
}

如果需要实现收起时的反向动画，再写一套反向的关键帧绑定到非激活状态即可。