逐帧动画

steps() 是 CSS 动画里的“逐帧动画”核心函数，常用于 雪碧图 / 打字机效果 / 像素风动画。逐帧动画是通过变换背景位置，移动宽为图片宽度的距离，实现图片的运动。

因此使用逐帧动画的前提是你需要每一帧的图片资源。该动画存在n帧就在steps中写n。

steps(n, position) 是 animation-timing-function 或 transition-timing-function 的一种

雪碧图逐帧动画

@keyframes move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -13700px 0;//背景长13700px
    }
}

animation: move 1s steps(25) infinite;

打字机效果

.text {
  width: 10ch;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 2s steps(10) forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 10ch;
  }
}

1ch = 当前字体中数字 0（零）的宽度

Example

https://shouji.360.cn/