CSS3 Transition

トランシションとはある一定のスタイルから別のスタイルへなめらかにアニメーションさせながら遷移させる効果です。

CSS3に対応したブラウザならば、JavaScriptを用いずに視覚的な効果を表現することができます。

tarnsition

始点と終点を指定する一過性のアニメーション

-webkit-transition-property : -webkit-transform;

プロパティの指定

-webkit-transition-duration: 2s;

初期動作の遅延

-webkit-transition-timing-function: easy-in;

アニメーションの種類 (easy-inは最初がゆっくり動作する)

-webkit-animation: move 5s 2;

プロパティ 再生時間 繰り返し回数

animation

キーフレームを指定して、繰り返し動作させるアニメーション