【CSSアニメーション】 CSS トランジション（Transitions）効果

トランジション(Transitions)は「変化」という意味で、Flash アニメーションや JavaScript を使用せずに、時間経過による変化を指定する際に使用します。

トランジションのプロパティによる変化は即座に反映されるのではなく、指定された時間の間に速度曲線(ベジェ曲線)に従って変化していきます。

一般的 CSSトランジション・プロパティは、マウスをあてた時のアニメーションによく使われます。

CSS「transition」のプロパティ

transition-property
トランジションを適用する CSS プロパティの名前を指定します。複数のtransitionプロパティ効果を適用するには、値をカンマ「,」で区切って指定します。値に「none」を指定すると、プロパティも変化しません。また、allを指定すると、変化を適用できるプロパティすべてが変化します。 transition-property: all; transition-property: none; transition-property: background-color; transition-property: background-color, height, width;
all	background, color, height, widht, outlineなど５つすべてのプロパティにトランジション効果が適用します。
none	プロパティに変化の適用はない。
プロパティ名	変化させるプロパティ名をカンマ「,」で区切って指定する。

transition-duration
トランジションの変化にかける時間の長さを指定します。異なる時間を複数指定することができます。時間を指定しない場合、トランジションのデフォルト値が「0」であるため、効果はありません。負の値も「0」と同様に扱われます。 transition-duration: 1s; transition-duration: 3s, 5s;

transition-timing-function
トランジションの変化が継続している時間内に、開始から終了までのプロパティの進行スピードのパターンを指定します。 transition-timing-function: ease; transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out;
ease	デフォルト値。ゆっくり始まり、次に速く、ゆっくり終了する効果を指定する。(cubic-bezier(0.25,0.1,0.25,1) ease
linear	開始から終了まで同じスピードのトランジション効果を指定する。（cubic-bezier(0,0,1,1) に同じ） linear
ease-in	ゆっくり始まるトランジション効果をを指定する。 (cubic-bezier(0.42,0,1,1)) ease-in
ease-out	ゆっくり終るトランジション効果を指定する。 (cubic-bezier(0,0,0.58,1) ease-out
ease-in-out	ゆっくり始まり、ゆっくり終了するトランジション効果を指定する。 (cubic-bezier(0.42,0,0.58,1) ease-in-out

異なるブラウザごとに対応するように、transitionプロパティにそれぞれ下記のように書き加えます。

ブラウザ：Browser

.transition {
/* Firefox ：-moz- */
-moz-transition-property:width 1s linear 2s;

/* Safari and Chrome ：-webkit- */
-webkit-transition-property:width 1s linear 2s;

/* Opera ：-o- */
-o-transition-property:width 1s linear 2s;
}