スマフォアプリ作成３９：CSSアニメーション

以前、setIntervalを使って定期的にイベントを発生させ、left等を

設定する事でアニメーションを行っていました。

しかし、CSS3からはCSSの設定でアニメーションを行う事が
可能になり、大分楽になりました。

アニメーションは「animation」、「transition」の２種類が存在します。

「animation」
・ループが可能
・キーフレーム（アニメーションの中の一瞬）毎の細かい設定が可能
・読込んで即時実行という事が可能

「transition」
・ループがない
・アニメーションを実行するのにJavaScriptやhover等の擬似クラスが必要

今回はtransitionを使ってみます。
transition関連のプロパティは以下のものがあります。
・transition-property
・transition-duration
・transition-timing-function
・transition-delay

一つずつ説明します。

「transition-property」　
　アニメーション対象のプロパティを指定。
　all　全て（デフォルト）
　none　アニメーションを行わない、　
　プロパティ名　指定したプロパティでアニメーションを行う

　例）transition-property: left,top
　　　leftとtopのプロパティ変更時にアニメーションを行う

「transition-duration」
　一回のアニメーションにかかる時間。
　秒(s)、ミリ秒(ms)などで指定可能。デフォルトは0

　例)transition-duration: 100ms
　　　アニメーションを100ミリ秒で行う。

「transition-timing-function」
　どのようにアニメーションを行うか。
　ease　開始と完了を滑らかにする（デフォルト）
　linear　一定
　ease-in　ゆっくり始まる
　ease-out　ゆっくり終わる
　ease-in-out　ゆっくり始まりゆっくり終わる
　cubic-bezier　ベジェ曲線で指定

「transition-delay」
　何秒後に開始するか。
　秒(s)、ミリ秒(ms)等で指定可能。デフォルトは0

上記のプロパティをまとめて指定するときは
transition: transition-property transition-duration transition-timing-function transition-delayとします。

例) transition: all 200ms linear 10ms

次回はアプリに組み込んでみます。