暂停css sprite循环播放后一秒钟

Question

有没有一种方法（使用CSS）在最后一步后暂停精灵动画一秒或更长时间？我尝试添加一个额外的步骤或将bg-position从80％到100％，但都无效。

.sprite {
  animation: anim 2000ms steps(16) infinite;
  background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
  height: 45px;
  width: 90px;
}

@keyframes anim {
  0% {
    background-position: 0px 0;
  }
  80% {
    background-position: -1440px 0px;
  }
  100% {
    background-position: -1440px 0px;
  }
}

<div class="sprite"></div>

- user5102070

---

我认为这不是重复的。正如您所看到的，正确的答案在这里行不通。此外，这个动画是有步骤的。 - user5102070

我尝试寻找解决方案，但目前这个动画比当前工作的动画更好。https://jsfiddle.net/aLnmh97e/4/ - ketan

谢谢Ketan，我知道这个，但我需要在那之后添加暂停，所以我加了“消失”，但还是谢谢你。 - user5102070

我认为唯一的暂停方法是为您的精灵添加额外的帧，大多数方法都说您需要省略关键帧的最后百分比，但这似乎会导致精灵倒回。如果您添加额外的帧，它将看起来像是暂停：https://jsfiddle.net/rstkqoLL/2/ - Pete

是的，我认为那是正确的，Pete。但我希望能找到另一个解决方案。 - user5102070

Answer 1

你尝试过让动画在达到50%时结束吗？也就是说，在1秒后，从50％到100％暂停：

@keyframes anim {
  0% {
    background-position: 0px 0;
  }
  50% {
    background-position: -1440px 0px;
  }
  100% {
    background-position: -1440px 0px;
  }
}

.sprite {
  animation: anim 2000ms steps(16) infinite;
  background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
  height: 45px;
  width: 90px;
}

@keyframes anim {
  0% {
    background-position: 0px 0;
  }
  50% {
    background-position: -1440px 0px;
  }
  100% {
    background-position: -1440px 0px;
  }
}

<div class="sprite"></div>

- Pixelomo

---

是的，基本上当我从80％暂停时，鱼会在那50％或20％消失。 - user5102070