css sprite 动画：循环之间的延迟

Question

我正在尝试为 png 精灵设置动画。 我的目标是平滑地旋转对象，即没有停顿 或循环之间的视觉不一致，就像一个精心设计的“忙碌”的 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 步，因为精灵中有 18 张图像，infinite 显然是用于无限动画。

您可以查看here，这还不错，但并不完美：我不知道如何抑制循环之间的（小）延迟。

如果您看不清楚，请尝试更改动画持续时间：在 0.5 和 1 秒之间切换让我感觉更明显。

我认为这是因为精灵中的动画开始和结束位置实际上是相同的图像（0px和-4500px在精灵中渲染相同的图像）

我看到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/