CSSアニメーション-01- transitionとanimation

CSSアニメーションに関するプロパティ、transitionとanimationで
jQueryやFlashなどを用いずにアニメーション表現が可能。

transitionとanimationの違い

transitionは元の状態(デフォルト)から指定の状態まで遷移し、指定の状態になる条件が解除されると逆再生で元に戻る。




animationのほうは、元の状態(デフォルト)から指定の状態までの変化の中間キーフレームを指定することでtransitionよりも細かな多段階アニメを表現できる。

タイミングについて

jQueryやFlashならば、イベントリスナーなどを使い、細かなタイミングでアニメーションを制御できるが
CSSアニメーションは基本的にマウスイベント(:hoverや:target)のみでしか制御できない。

サポートプロパティ

値	animation	transition	概要
独立の値	-	transition-property	変化させるプロパティを指定。
	animation-name	-	@keyframesで定義したキーフレーム名を指定
	animation-iteration-count	-	アニメーションの再生回数を設定。
	animation-direction	-	再生方向を指定
	animation-play-state	-	マウスホバー時などにアニメの再生か一時停止を指示
	animation-fill-mode	-	アニメの再生前と終了後にどのような状態にするかを指示
共通の値	animation-duration	transition-duration	アニメーションの持続時間,(S)秒と(ms)ミリ秒で指定
	animation-timing-function	transition-timing-function	durationで設定した再生時間中のイージングを指定
	animation-delay	transition-delay	アニメーションの開始前の待機時間を(S)秒と(ms)ミリ秒で指定

ショートハンド記述

• transition