CSS动画step-start用法详解

理解step-start：让动画不再平滑

平时写CSS动画，大多用的是默认的ease或者linear，动画从头到尾过渡得很顺滑。但有些场景下，你可能希望动画“一顿一顿”地跳着走，比如模拟老式翻页时钟、像素风游戏人物走路，或者做一个逐帧播放的指示器。这时候，step-start 就派上用场了。

step-start到底是什么？

CSS中的animation-timing-function控制动画过程中的速度曲线。而step-start属于分步函数（stepping function），它会让动画在指定的步数内立即跳转，而不是渐变。

具体来说，step-start相当于steps(1, start)，意思是把整个动画分成1步，并且在每一帧开始时就直接跳到下一个状态，没有中间过程。

一个简单的例子

假设你想让一个div在3秒内从左移到右，但不是滑动过去，而是“瞬间传送”一次到位：

.box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  animation: moveRight 3s step-start forwards;
}

@keyframes moveRight {
  0% {
    left: 0;
  }
  100% {
    left: 200px;
  }
}

这个动画不会有任何中间位置，时间一到，元素直接从0跳到200px。就像你按了一下快进键，画面立马切换到了下一帧。

和step-end有什么区别？

很多人容易搞混step-start和step-end。其实关键在于“起始点”还是“结束点”触发跳跃。

使用step-start，动画一开始就会立刻进入第一帧的状态；而step-end则会停留在起点直到动画结束才跳到终点。你可以想象成：一个是抢跑，一个是压哨得分。

实用场景：制作帧动画

比如你要做一个4帧的行走小人动画，每帧间隔相同，可以用step-start配合背景图位置切换：

.walker {
  width: 64px;
  height: 64px;
  background-image: url(walk-sprites.png);
  animation: walk-cycle 1s step-start infinite;
}

@keyframes walk-cycle {
  0%   { background-position: 0 0; }
  25%  { background-position: -64px 0; }
  50%  { background-position: -128px 0; }
  75%  { background-position: -192px 0; }
  100% { background-position: -256px 0; }
}

这里每个关键帧之间没有过渡，图片位置瞬间切换，形成清晰的帧动画效果。如果用了linear，反而会模糊不清。

和其他steps的区别

虽然step-start等价于steps(1, start)，但实际中更常用的是多步控制，比如steps(4, start)表示分4步，每步开始时跳转。而step-start只适用于只需要一次跳跃的情况。

如果你要做一个数字翻牌效果，比如年份从2020跳到2024，每年一跳，那就可以用steps(4, start)来控制节奏，比一个个写动画更高效。