如何强制控制CSS精灵动画的步骤播放顺序？

修改后的完整代码 #

#image {
  height: 32px;
  width: 32px;  
  background: url('./media/man.png') 32px 0px;
  animation: autoRotate 1s steps(4) infinite;
  transform: scale(5);
  image-rendering: pixelated;
}

@keyframes autoRotate {    
  0%, 25% {
    background-position: 32px 0px; /* 第一步：左 */
  }
  25.01%, 50% {
    background-position: 32px 64px; /* 第二步：前 */
  }
  50.01%, 75% {
    background-position: 32px 96px; /* 第三步：右 */
  }
  75.01%, 100% {
    background-position: 32px 32px; /* 第四步：背 */
  }
}

原理说明 #

原动画仅通过0%和100%关键帧定义起止位置，steps(4)会按线性递增的方式自动划分4个阶段，导致播放顺序固定。要自定义顺序，需明确划分每个阶段的关键帧区间：

• 把100%的动画时长平均分成4段，每段对应25%的区间
• 为每个区间指定你需要的background-position，确保每个阶段内保持固定的精灵图位置
• 使用25.01%这类细微偏移的百分比，避免相邻关键帧在同一位置可能触发的状态闪烁问题

这样steps(4)就会按照你定义的区间顺序，依次切换每个阶段的精灵图显示，最终实现自定义的播放序列。

内容的提问来源于stack exchange，提问作者ferter3006