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。填充你的精靈，使其寬度爲13984px，你的框架應該均勻分佈在437px。