私は最近、アニメーションGIFを使用する代わりにJavaScriptを使用してCSSスプライトをアニメーション化する人々を見てきました。なぜアニメーション化されたCSSスプライトではなくアニメーション化されたGIFですか？
例：
これはすべて技術を公開したり試したりしているのですか、そこから何らかの利点がありますか？私は利益があることを知りたいと思っています。 私が尋ねる理由は、どちらの場合も中間フレームを生成する必要がある（主にトゥイーン技術を使用している）ことがわかりませんでした。
コントロール
あなたは、アニメーションGIFを制御することはできません。あなたはそれらを始めることはできません、あなたはそれらを止めることはできません。それらは読み込まれるとすぐにアニメートされます。
スプライトを使用すると、アニメーションを制御できます。ブラウザのイベントを開始、停止、反応させ、アニメーションをパンすることができます。たとえば、Google Doodlesは通常、クリックすると有効になります。
気の利いたGIFコントロールシステムは、9gagで見つけることができます。それらをDOMに追加して開始し、それらを削除して、あらかじめ生成された「最初のフレームビュー」でそれらを入れ替えることで、それらを停止することができます。しかし、それはGIFが行く限りです。
独立したインスタンス
あなたが同じGIFの複数のインスタンスをロードすると、すべてのこれらのインスタンスは、ページ全体に同じ画像を使用して同時に動きます。あなたがユニコーンGIFをダンスする行を持っているなら、彼らは同時に踊っているでしょう。同期ダンス！
同じスプライトでは、同じ画像を使用していても、アニメーションは基本となるスクリプトに依存します。したがって、1つのスプライトが1つのスクリプトによってアニメーション化され、別のスプライトが別のスクリプトによってアニメーション化される場合、両方のアニメーションは互いに独立して実行することができます。
これにより、別のGIFを作成する手間が省け、スクリプトを変更するだけで簡単に変更できます。
滑らかなアニメーションを確保しながら、ロード
アニメーションGIFはちょうどアニメーション、およびインターネットが遅い場合、アニメーションがロードされる画像のより多くまで凍結します。
これに対して、スプライトの利点は、事前にロードして、すべての画像を事前にロードできることです。これにより、アニメーションに使用するリソースがアニメーションに先立ってロードされ、できるだけ滑らかにアニメートされるようになります。
ただし、GIFは静止画像です。それらをDOMから動的にロードし、DOMに追加する前にロードイベントを待機することができます。
PNGスプライトで
をレンダリングする部分には、部品にアニメーションシーンを壊し、アニメーションで「パーシャル」を行うことができます。たとえば、キャラクターがまだ立っていても、腕が波打っているときなどです。文字全体またはシーン全体をアニメートする必要はありません。キャラクタのボディのスプライトを描く要素を「静止」状態に置くことができますが、アームはアニメーション化されている別の要素です。これにより、スプライトシートのスペースとサイズが節約されます。これの良い例は、Googleの2012 Mother's Day Doodleでした。
ほとんどの場合、は、GIFアニメーションのすべてのフレームが全体画像であり、その中の何かが動くかどうかにかかわらずアニメーション化されます。フレーム数が増えるほど、GIFのサイズは大きくなります。
GIFがちょうど
GIFファイルはアイコンの意味された拡張できません。ファイルサイズと画像サイズの比率は、PNGやJPGと比較してGIFではうまくスケールアップされません。
ジョセフ・ドリーマーの答えの上にあなたがイメージISN」はGIF内の各フレームについて語っ何tは100％真です。 GIFフォーマットでは、さまざまなバックグラウンド消去オプションを使用して、フレームの一部を更新することができます。 –
...私の知る限りでは
、あるいは少なくともそれはGIFファイルが本当の色されていない、ということに使用される、JPGのみを使用する別の理由/ PNG画像CSSのスプライトとして。
ここでは、AppleがiPhone 5ページ上でそれをやったのは良い内訳だ - https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI –