CSS3 Transitionsを使ってみました。

TransitionsプロパティはCSS3で追加されたアニメーション機能です。
使ってみたら簡単に実装できたので、今回はTransitionsについて書いてみました。

:hoverでdiv要素を徐々に灰色の背景に変化させる記述例です。

 

■css記述例

#demo {
   transition: all 5s linear;
   -o-transition: all 5s linear;
   -moz-transition: all 5s linear;
   -webkit-transition: all 5s linear;
}

#demo:hover {
   background: #CCCCCC;
}

■HTML記述例

<div id="demo">
色が変わります。 
</div>

デモページはこちら

 

今回のサンプル例の値を細かく見てみましょう。
transition: all 5s linear;

all
プロパティすべてが変化する（初期値）

5s
変化にかかる時間（秒）

linear
変化の仕方。linearは一定

その他
ease： 開始と完了がなめらか
ease-in： ゆっくり始まる
ease-out： ゆっくり終わる
ease-in-out： ゆっくり始まりゆっくり終わる


対応ブラウザですが、transitionプロパティは、Safari、Chrome、Firefox、Operaで使えます。
IEは10からの対応になっています。