CSS sprite 动画时间问题

【问题标题】：CSS sprite animation timing issuesCSS sprite 动画时间问题
【发布时间】：2015-03-10 23:11:09
【问题描述】：

我似乎无法获得正确的动画时间

.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 精灵动画？

【问题讨论】：

标签： css css-animations css-sprites

【解决方案1】：

你的数学错了..我想。

图片显然是 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;
  }
}

&lt;div class="spinner"&gt;&lt;/div&gt;

【讨论】：

太棒了！没有一个教程这么说。我很敬畏这是一个我完全忽略的简单解决方案。