1

私は切実に助けが必要です。

私がやろうとしているのは、mozolla が firefox OS の 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>
4

1 に答える 1

2

スプライトの合計幅 (13958px) が、アニメーションがステップスルーするフレーム数 (32) に均等に分割されないため、ぐらつきます13958 / 32 = 436.1875。これにより、アニメーションの補間中に段階的な値がブラウザによって丸められ、ぐらつきが発生します。これは、イラストの位置がセルによって異なることも意味します。

David のデモを見ると、均等に分割されているため、アニメーションがスムーズであることがわかります。6864 / 44 = 156

スプライトの合計幅が 32 フレームに均等に分割されるように、フレームの間隔を広げる必要があります32 * 437 = 13984。幅が 13984px になるようにスプライトをパディングし、フレームが 437px で均等に配置されるようにします。

于 2013-07-24T11:31:20.510 に答える