CSS Sprite 动画: delay between loops

Question

我正在尝试为 png Sprite 制作动画。我的目标是平稳地旋转一个物体，即没有停顿或循环之间的视觉不一致，就像设计良好的“忙碌”gif 看起来一样。

为什么不用 gif 动图？因为我想要我的图像中有更多的颜色，我目前也在尝试学习新的 css3 内容。

所以，我想出了这个样式表:

.hexagon
{
    width:250px;
    height:250px;
    background:url('http://i59.servimg.com/u/f59/18/89/55/67/hexago10.png');    
    -webkit-animation: playhexagon .5s steps(18) infinite;
    animation: playhexagon .5s steps(18) infinite;
}

@-webkit-keyframes playhexagon {
   0% { background-position: 0px; }
   100% { background-position: -4500px; }
}

@keyframes playhexagon {
   0% { background-position: 0px; }
   100% { background-position: -4500px; }
}

我使用 18 步是因为 Sprite 中有 18 个图像，infinite 显然是为了无限动画。

如您所见here这还不错，但并不完美:我不知道如何抑制循环之间的(小)延迟。

如果您看不清楚，请尝试更改动画持续时间:在 0.5 秒和 1 秒之间切换使它在某种程度上对我来说更明显。

我认为这是因为 Sprite 中的动画开始和结束位置实际上是同一幅图像(0px 和 -4500px 在 Sprite 中呈现相同的图像)

我看到 0% { background-position: 0px; 指令是可选的，没有它动画的播放方式完全相同，但我写它是为了明确说明正在发生的事情。

我尝试了一些没有结果的技巧来解决这个问题:

• 在循环之间只显示 Sprite 中的第一张图片一次，或者
• 将结束和开始动画的速度加倍，这样就不会被眼睛注意到

我宁愿只使用 css，但如果不可能，我会使用完整的 javascript。新的 css3 动画东西太久了。

感谢任何见解等

Answer 1

实际上，暂停的不是浏览器/css/动画。这只是特定动画的制作方式，两个非常相似的帧让它感觉就像在暂停。

为了演示，您可以将动画更改为中途开始和中途结束。如果它暂停，您现在会期望暂停是在六边形水平而不是面向您时，但实际上它看起来完全一样。

@keyframes playhexagon {
   0% { background-position: 2250px; }
   100% { background-position: -2250px; }
}

http://jsfiddle.net/sk9o3L3g/4/