naohiro

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からの対応になっています。


 

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら