暂停css精灵后循环

Question

有没有办法（用css）在最后一步之后暂停精灵一秒或多秒？我试图再添加一个步骤或相同的bg位置从80％到100％，但它没有用。

DEMO：https://jsfiddle.net/aLnmh97e/2/

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

CSS

.sprite {
  animation: anim 2000ms steps(16) infinite;
  background: url(http://michalorsag.com/mo/sprite-long-time-reward.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;
  }
}

Answer 1

你有没有尝试让动画达到50％？也就是说，在1秒后，它会从50％-100％暂停：

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