我正在尝试为 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 动画东西太久了。
感谢任何见解等
最佳答案
实际上,暂停的不是浏览器/css/动画。这只是特定动画的制作方式,两个非常相似的帧让它感觉就像在暂停。
为了演示,您可以将动画更改为中途开始和中途结束。如果它暂停,您现在会期望暂停是在六边形水平而不是面向您时,但实际上它看起来完全一样。
@keyframes playhexagon {
0% { background-position: 2250px; }
100% { background-position: -2250px; }
}
关于CSS Sprite 动画: delay between loops,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26866211/