CSS3アニメーションを実現する「transition」

transitonプロパティを使って、時間的な変化を付けることが出来ます。

変化する変化速度や開始のタイミング、また要する時間などをCSSのみで実現が可能です。
ただし、対応ブラウザの問題がありますので注意が必要です。

※IE8,9は対象外、iOS,Androidはベンダープレフィックス必須
（参考：Can I Use）

 

■ 各プロパティ

transition-property	効果を付ける対象になるプロパティ名
transition-duration	変化にかける時間
transition-timing-function	変化の仕方を指定
transition-delay	変化をはじめるまでの時間

 

複数の指定をする場合には、値を記述する順番に注意してください。

「transition-property,transition-duration,transition-timing-function,transition-delay」の順番で指定するようにします。

単体で指定する場合等では、時間として指定される1番目の値は「transition-duration」として認識され、2番目に指定された値は「transition-delay」として認識します。

 

記述例）
transition: font-size 2s ease 1s;
(フォントサイズを1秒後に2秒間かけて開始と終了を滑らかに変化させる)

 

■ 初期値

transition-property	none
transition-duration	0
transition-timing-function	ease
transition-delay	0

 

■ transition-timing-functionの値

 一般的にイージングと呼ばれる速度変化の指定にはいくつかあります。

ease	開始と終了を滑らかに
linear	一定の速度で
ease-in	開始をゆっくり
ease-out	終了をゆっくり
ease-in-out	開始と終了をゆっくり

 

● 実際のサンプルを見てみます。

1. 背景色と文字色を変化させる
2. 景サイズと背景色を変化させる

 

1.背景色と文字色を変化させる場合

▼HTMLを記述

 ▼CSSを記述

 

デモサンプル1

 

2.背景色と背景サイズ、文字サイズを変化させる場合

▼HTMLを記述

  ▼CSSを記述

 

デモサンプル2

 

以上になります。