如何让CSS逐帧动画在指定步骤（如第8步）停止？

当然可以做到！你现在的动画是每次循环播放12帧，重复4次后停在最后一帧，要让它停在第4次循环的第8帧，其实只需要利用CSS动画支持小数循环次数这个特性就可以轻松实现，而且能完美保持原动画的播放速度。

核心思路 #

每次完整循环对应12帧，你需要的是3次完整循环加上第4次循环的8帧，也就是总共完成 3 + 8/12 = 11/3 ≈ 3.6667 次循环。CSS的animation-iteration-count属性支持设置小数，代表完成部分循环，这样动画就会在走到目标帧时自动停止。

修改后的代码 #

.win_1 {
  display: block;
  width: 485px;
  height: 429px;
  background: url(https://image.ibb.co/fTh91T/spirate.jpg) left center;
  animation: cc1 0.5s steps(12) forwards;
  position: fixed;
  /* 将循环次数改为11/3（≈3.6667），对应3次完整循环+第4次的8帧 */
  animation-iteration-count: 11/3;
}

@keyframes cc1 {
  100% { background-position: -5808px; }
}

备选方案：直接指定目标偏移量 #

如果你更倾向于将整个动画视为一次完整的序列，也可以直接计算出目标帧的背景偏移位置，然后调整动画的总步数和时长：

1. 计算单帧宽度：5808px / 12 = 484px
2. 目标总偏移：3次完整循环的偏移 + 第8帧的偏移 = 3*5808px + 8*484px = 21296px
3. 总步数：3*12 +8 =44步
4. 总时长保持和原动画一致：0.5s *4=2s

修改后的代码如下：

.win_1 {
  display: block;
  width: 485px;
  height: 429px;
  background: url(https://image.ibb.co/fTh91T/spirate.jpg) left center;
  animation: cc1 2s steps(44) forwards;
  position: fixed;
}

@keyframes cc1 {
  100% { background-position: -21296px; }
}

这个方案的缺点是需要手动计算总偏移量，且每帧的播放速度会略有变化（原每帧≈0.0417s，此方案≈0.0455s），所以更推荐第一种方法。

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