CSS3关键帧动画stopmotion图像震动

Question

我迫切需要帮助。

我试图做的是mozolla对firefox操作系统的Firefox主页所做的一样。火红的狐狸。

下面是它的演示：http://davidwalsh.name/demo/firefox-animation.php

这是我的动画，请注意摆动。框架间距均匀。

http://jsfiddle.net/vSXcr/

有什么想法吗？

.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>

Answer 1

它因为你的总精灵宽度（13958px）不能平均分成你的动画所经过的帧数（32）而摇摆不定：13958 / 32 = 436.1875。这将导致动画插值期间的步进值被浏览器舍入，从而导致摆动。这也意味着插图的位置因单元格而异。

如果你看看大卫的演示，你会看到他的动画很流畅，因为它平均分配：6864 / 44 = 156

你需要更多地将你的帧空间分开，这样你的总精灵宽度可以均匀地划分为32帧：32 * 437 = 13984。填充你的精灵，使其宽度为13984像素，你的帧应均匀间隔为437像素。