アニメーションPNGスプライトとしてのAJAXローディングインジケータのベストプラクティス/ツールですか？

Question

明らかに、GIFはアルファチャンネルをサポートしていません。アルファチャンネル対応の「スロボ」、「スピナー」、またはAjaxローディングインジケータがなくなった場合、クロスブラウザーのオプションは、スロボのすべての状態を含むスプライトされたPNGでしかないようです。

バックグラウンドの原点を設定するクラスなどを変更することで、JavaScriptを使用してフレームを進めることができます（使用可能な場合は​​を使用します）。

これを具体的に生成するのに役立つものは何も見つかりません。誰も知っていますか？私が知っておくべきベストプラクティス？ （コンパスには、少なくともCSS部分を自動化するために利用できるスプライトヘルパーがあります）

Answer 1

「ベストプラクティス」はありませんが、多くのツールがありますそこ。まず「アニメーションgifからスプライト」を検索します。あなたがアニメーションのオプションはすべて、あなたのJavaScriptをコーディングすることを好む方法によって異なりスプライトを持っていたら

http://forums.tigsource.com/index.php?topic=9041.msg282280#msg282280

：あなたはImageMagickには、インストールされている場合は、この記事を見てみましょう。

ブラウザのマトリックスは何ですか？贅沢品（FF、Safari、Chromeなど）を使用している場合は、次のようなCSSアニメーションを使用できます。各フレームは100ピクセルの正方形で、スプライトには5フレームあります。

#animatedImage { 
    width: 100px; 
    height: 100px; 
    background: transparent url(sprite.png) no-repeat 0 0; 
    animation-duration: 400ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: step-start; 
    animation-name: animateSprite; 
} 
@-webkit-keyframes animateSprite { 
    0% { background-position: 0 0; } 
    20% { background-position: -400px 0; } 
    40% { background-position: -300px 0; } 
    60% { background-position: -200px 0; } 
    80% { background-position: -100px 0; } 
    100% { background-position: 0 0; } 
}