css精灵动画：循环之间的延迟

我正在尝试制作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个步骤，因为sprite中有18个图像，而

无限

显然是无限动画

正如您可以检查的那样，这并不是很糟糕，但并不完美：我不知道如何抑制循环之间的（小）延迟

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

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

我看到

0%{background position:0px；}

指令是可选的，没有它的动画播放方式完全相同，但我编写它是为了明确地说明正在发生什么

我尝试了一些技巧，但没有结果来解决此问题：

• 仅显示一次sprite betwwen循环中的第一个图像，或
• 将“结束”和“开始”动画的速度提高一倍，这样眼睛就不会注意到这一点

我更喜欢只使用css，但如果不可能，我会使用完整的javascript。再见了，新的css3动画素材

---

感谢您提供的任何见解和类似的

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

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

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

---

精灵是由18张不同的图片组成的，所以如果用17张，我将丢失一张。我已经试过了，但是我会检查你的小提琴。尽管精灵中有18个不同的图像（你可以检查），但是指令0px和-4500px在精灵中显示相同的图像（第一个）sry如果我不清楚，我用更新的png进行了更多的测试，其中有17个图像（减去上一个png的最后一个），我仍然看到循环之间有一个很小的停顿，但这可能只是一种感觉我很确定这只是一种感觉-试试我上面建议的改变，看看停顿是否发生在序列中的不同点上。如果没有，这意味着暂停完全取决于图像。另外，尝试将精灵的大小加倍-看看它是否只会每秒钟暂停一次迭代。如果它停留在中间，它又是图像。最后，试着用一些不那么主观的东西——例如一个分成圆弧的圆。我很有信心你会发现我是对的。这是一个非常常见的用例，在许多类似的动画中都能很好地工作