PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet

アニメーションに対応した画像といえばGIFですが、PNG画像でもコマ送りのアニメーションさせてしまうスタイルシートのナイスアイデアを紹介します。

Sprite sheet animation with steps().

デモはCSS3アニメーションに対応したブラウザでご覧ください。

デモページ

仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。

「show sprite」をチェックするとその仕組みがよくわかります。
「animation-duration」の数字を変更すると、アニメーションの速度が変わります。

デモページ：スプライトを表示

スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。
デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。

CSS

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}