anime

css3で作るパラパラアニメ(step animation)

css3でパラパラアニメを作る方法をご紹介します。

こんなパラパラアニメを作ります

画像を準備する

アニメさせるコマを、CSSスプライトの要領で連結した1枚のpng画像にしておきます。今回は1コマを100px四方にして8×2の16コマで800 x 200pxの画像を作成しました。こんな感じです。
anime

アニメを表示させる枠を用意する

div.anmに縦横100pxの大きさを指定して、overflowをhiddenにして、その中に作っておいた画像を置きます。これでdiv.anmの中に、左上の1コマだけが見えている状態になります。

animation-timing-functionにsteps()を使ってパラパラアニメにする

この画像の、上の列にある8枚のポーズを、順番に表示させるための指定がこれです。

animation-timing-functionは、linear、easeなどを使う事が多いですが、そこにsteps(n,end)やsteps(n,start)を指定することで、アニメーションの途中を見せずに、不連続なパラパラアニメが作れます。
nは1以上の整数を指定し、指定したアニメーションをn回に等分したアニメを実行させることができます。
参考:timing-function – CSS | MDN

animation-timing-functionにstep-endを使って、任意のコマを任意のタイミングでパラパラアニメにする

任意のコマを任意のタイミングで出すには、step-endか、step-startを使います。keyframesの%に指定したタイミングで変化が起きるstep-endの方が、直感的に使いやすいと思います。

こうして作ったcssのパラパラアニメには、gifアニメと比較して、以下の長所があります。

  • png画像が使える。色数も多く、半透明も使い放題。透過gifのようなエッジのジャギーがない。
  • 顔のパーツ、体のパーツなどをレイヤーの様に重ねる事も可能
  • スプライト画像を使い回して、別のアニメーションをcssを書き換えるだけで作れる
  • アニメーションのタイミングの調整も、cssで可能

逆に短所は以下の点です。

  • css animationに対応していないブラウザで動かない。
  • cssが分からないと編集できない。
  • gifアニメは単一のファイルとして扱えるのに対して、画像、DOM、cssの構成が必要。

一長一短あるので、どちらも使えるように練習しておくと良いでしょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA