アニメーション化されたCSSスプライトの代わりにアニメーション化されたGIFを使用しないのはなぜですか？
最近の傾向では、アニメーションGIFを使用する代わりにJavaScriptを使用してCSSスプライトをアニメーション化する人々を見てきましたか？
例：
- http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday （実際、Googleは他のDoodleでもこの手法を使用していました）
- https://everyme.com/ （ 'me'ロゴ）
- その他多数...
それはすべて、テクノロジーを示したり実験したりするためだけのものですか、それともテクノロジーから何かメリットがありますか。もしあれば、私はその利点を知りたいと思っています。 私が尋ねている理由は、どちらの場合も（主にトゥイーン技術を使用して）中間フレームを生成する必要があるため、理解できなかったためです。
コントロール
アニメーションGIFを制御することはできません。あなたはそれらを開始することはできません、あなたはそれらを止めることはできません。ロードするとすぐにアニメーション化します。
スプライトを使用すると、アニメーションを制御できます。ブラウザのイベントを開始、停止、反応したり、アニメーションをパンしたりできます。たとえば、Google Doodleは通常、クリックするとアクティブになります。
気の利いたGIF制御システムは9gagにあります。それらをDOMに追加することで開始し、削除して事前に生成された「最初のフレームビュー」と交換することで停止できます。しかし、それはGIFに関する限りです。
独立したインスタンス
同じGIFの複数のインスタンスをロードすると、これらのインスタンスはすべてページ全体で同じ画像を使用し、同時に移動します。踊っているユニコーンGIFの列がある場合、それらは同時に踊っています。シンクロダンス！
ただし、スプライトを使用すると、同じ画像を使用している場合でも、アニメーションは基になるスクリプトに依存します。したがって、1つのスプライトが1つのスクリプトによってアニメーション化され、別のスプライトが別のスクリプトによってアニメーション化される場合、両方のアニメーションは独立して、互いに異なる方法で実行できます。
これにより、別のGIFを作成する手間が省け、スクリプトを変更するだけなので簡単に変更できます。
スムーズなアニメーションの確保
アニメーションGIFは読み込み中にアニメーション化するだけで、インターネットの速度が遅いと、画像がさらに読み込まれるまでアニメーションがフリーズします。
対照的に、スプライトの利点は、スプライトを事前にロードして、すべての画像を事前にロードできることです。これにより、そのアニメーションに使用されるリソースがアニメーションの前にすでにロードされていることを確認して、アニメーションが可能な限りスムーズになるようにします。
ただし、GIFは静止画像です。それらをDOMから動的にロードし、それらをDOMに追加する前にロードイベントをリッスンすることができます。
部分レンダリング
PNGスプライトを使用すると、アニメーションで「部分」を実行して、アニメーションシーンを部分に分割できます。たとえば、キャラクターが静止しているが、腕が振っている場合です。キャラクター全体、またはシーン全体をアニメートする必要はありません。キャラクターの体のスプライトを表す要素を「フリーズ」状態にすることができますが、腕はアニメーション化されている別の要素です。これにより、スプライトシートのスペースとサイズが節約されます。この良い例は、Googleの2012年母の日Doodleです。
対照的に、ほとんどの場合、GIFアニメーションのすべてのフレームは画像全体であり、その中の何かが動くかどうかをアニメーション化します。フレームが多いほど、GIFのサイズは大きくなります。
GIFは拡大縮小されません
GIFはアイコン用でした。ファイルサイズと画像サイズの比率は、PNGやJPGと比較して、GIFではそれほど大きくなりません。
ジョセフ・ザ・ドリーマーの答えに加えて...
私の知る限り、または少なくとも以前は、GIFファイルはトゥルーカラーではありません。これは、JPG/PNGをcssスプライトとして使用するもう1つの理由です。