css - CSS Sprite动画计时问题

我似乎无法正确设置动画时间

http://codepen.io/anon/pen/ZYMgqE

.spinner {
          width: 36px;
          height: 36px;
          background: url('http://i.imgur.com/CYiaWsF.png') top center;
          animation: play 1s steps(10) infinite;
        }

        @keyframes play {
           100% { background-position: 0px -2844px; }
        }

我尝试了无数组合，但总看起来像是电影胶片。

难道我做错了什么？我是否误解了CSS Sprite动画？

最佳答案

你的数学不对..我想。

图片显然是2844像素高...因此，步数应为高度除以元素高度

2844/36 = 79

.spinner {
  width: 36px;
  height: 36px;
  background: url('http://i.imgur.com/CYiaWsF.png') top center;
  -webkit-animation: play 1s steps(79) infinite;
  animation: play 1s steps(79) infinite;
}
@-webkit-keyframes play {
  100% {
    background-position: 0px -2844px;
  }
}
@keyframes play {
  100% {
    background-position: 0px -2844px;
  }
}

<div class="spinner"></div>

关于css - CSS Sprite动画计时问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28966726/