CSS animationでRPG風戦闘シーン

cssのアニメーションにfirefox5から対応したということで、復習してみた。

cssアニメーションプロパティ
` アニメーションのキーフレームを示す名前
animation-name : name;

1 回のアニメーションの長さ(秒,ミリ秒)
animation-duration :.10s;

アニメーションの進め方を設定します。これは加速曲線を定義。アニメーションのイージング機能を定義する感じ(ease,linear,ease-in,ease-out,ease-in-out)
animation-timing-function: ease-in-out;

要素が読み込まれてからアニメーション開始までの遅延時間(秒,ミリ秒)
animation-delay : 10s;
アニメーション完了後に、逆方向のアニメーションを行い、交互にくり返すかの設定
animation-direction: normal;

アニメーション完了後に、実行前や実行後、その両方のスタイルを適用するかを設定
animation-fill-mode: forwards;

アニメーションを一時停止したり、再開したりすることができる。アニメーションの状態を判定できるプロパティ
animation-play-state: running;

アニメーションの繰り返し回数を設定(無限に繰り返す場合はinfinite )
animation-iteration-count: 1;*/
`

実際には各プロパティにはvendor prefixが必要。
アニメーションは状態毎にイベントを発火するので、
` //アニメーション開始イベント
e.addEventListener(“animationstart”, listener, false);

//アニメーション終了イベント
e.addEventListener(“animationend”, listener, false);

//アニメーションが1周するごとに発生
e.addEventListener(“animationiteration”, listener, false);
` のように取得可能。
こちらもvendor prefixが必要でwebkitAnimationEnd,mozAnimationStartなどとしないといけない。

で、簡単に作ったのが以下。ゲーム風の表現も全然可能ですね。

css animationをサポートしてないブラウザだと動かないです。実用にはここでjQeuryなどでアニメーションさせたりするといいかな。
css animationのほうがjvascriptでの表現より軽く、負荷も少ない。

cssを書くのが大変なので、scssやless使ってやると楽になりそう。