1

I am in desperate need of help.

What im trying to do is the same thing mozolla did to the homepage of firefox for their firefox OS. The flaming fox.

Heres the demo of it: http://davidwalsh.name/demo/firefox-animation.php

And here is my animation, notice the wobble. The frames are spaced evenly.

http://jsfiddle.net/vSXcr/

Any ideas?

.bannerimg {
background: url(http://beresponsive.net/tcex/img/ani3.png) repeat-x;
width: 432px;
height: 537px;
animation: animate-kids 3s steps(32) infinite;
-webkit-animation: animate-kids 3s steps(32) infinite;
-moz-animation: animate-kids 3s steps(32) infinite;
}
@keyframes animate-kids {
0% {background-position: 0 0; }
100% {background-position: -13958px 0;}
}
@-webkit-keyframes animate-kids {
0% {background-position: 0 0; }
100% {background-position: -13958px 0;}
}
@-moz-keyframes animate-kids {
0% {background-position: 0 0; }
100% {background-position: -13958px 0;}
}

<div class="bannerimg"></div>
4

1 回答 1

2

它摇晃是因为您的总精灵宽度（13958px）没有均匀地划分为您的动画正在步进的帧数（32）13958 / 32 = 436.1875：。这将导致动画插值期间的步进值被浏览器四舍五入，从而导致摆动。这也意味着插图的位置因单元格而异。

如果您查看 David 的演示，您会看到他的动画很流畅，因为它是均匀划分的：6864 / 44 = 156

您需要将帧间隔更多，以便您的精灵总宽度平均分为 32 帧：32 * 437 = 13984. 填充您的精灵，使其宽度为 13984 像素，并且您的帧应均匀间隔为 437 像素。

于 2013-07-24T11:31:20.510 回答