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; }指令是可选的，如果没有它，动画的播放方式完全相同，但我写的是明确说明发生了什么。

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

只显示精灵中的第一张图像，或者
结束速度加倍并开始动画，这样就不会引起注意

我更喜欢只使用css，但如果不可能，我将使用完整的javascript。对于新的css3动画来说太长了。

感谢您的任何见解和此类

Answer 1

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

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

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

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

css sprite animation：循环之间的延迟

1 个答案: