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

デモページ 仕組みは、横に各コマを並べた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; } }

[kana321]

コリス

[deokisikun]

参考にさせて頂きます＞＜

[glat_design]

おお、すばらしいな…やってみたくなる /

[xucker]

そろそろ、なぜアニメーションのMNGは失敗したのかという、ストーリーが読みたい。

[iww]

アニメーションPNG使えばいいのに

[a2de]

アニメーションPNGとかいうのがあった気がするけど、どうなったんだろう

[Donca]

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

[kenchan3]

元絵は一枚とかなかなか

[hr07jp]

PNG画像でもコマ送りのアニメーション -Sprite sheet