CSS Transition.
CSS3になって注目されております”transition”について解説します。この機能は簡潔に言うと、要素にアニメーション機能を付加し、オブジェクトにマウスオーバーした際、オブジェクトを徐々に変化させるものです。僕もあんまり詳しくはないのですが、理解している範囲で、メモ程度に書いていきます。
僕のサイトのボタンにも密かに使われていますので、サンプルとして見てみてください（IEには対応してません、っていうか、transition機能自体がIEに対応していません）。(http://takatoshiono.com)
普通、マウスがボタンに乗ると、パッと切り替わるだけですが、ここでは徐々にボタンの背景が変わるようにしてあります。
これ以外にも、オブジェクトの大きさを変えたり、ボーダーを変えたり、移動させたり、様々なことができます。
これらが、JavaScriptなしでできるんですから便利ですよね。サイトにもやさしいです。
さて、コードですが、そんなに難しくなかったです。例えば、ある要素の背景色を赤から青に徐々に変えることを考えます。仮にそのクラスを”.sample_object{}”としましょう。マウスが載っていない状態の背景は赤なので
.sample_object{
background-color: #FF0000; /*赤*/
}
としておけばいいです。そしてマウスに乗った状態も定義します。
.sample_object:hover{
background-color: #0000FF; /*青*/
}
ここにtransitionの機能を加えます。コードはマウスが載っていない方のクラスに記述します。
指定しなければならないtransitionのプロパティーは、
- transition-property （変化させたいプロパティーを指定）
- transition-duration （アニメーションが完了するまでの時間を指定）
- transition-timing-function （プロパティー値の変化の加速度を指定）
- transition-delay （マウスが乗ってから、アニメーションが始まるまでの待機時間を指定）
です。
例えば、マウスが乗ったらすぐ、２秒かけて、線形的に背景を変えたい時は、
.sample_object{
background-color: #FF0000; /*赤*/
transition-property: background-color;
transition-duration:2.0s;
transition-timing-function:linear;
transition-delay:0.0s;
}
のように指定しておくと、マウスオーバーした時に徐々に背景が青に変わっていきます。
ちなみにこれらの要素をまとめて書くこともできます。その時は
transition: “property” “duration” “timing-function” “delay”;
の順番で指定します。上記の例だと
transition: background-color 2.0s linear 0.0s;
コンマでつなげて複数指定することもできます。時間は秒（s）かミリ秒（ms）で指定します。
変化の仕方（timing-funtion）ですがlinear以外にもいろいろ指定できます。
- ease （滑らかに始まり、滑らかに終わる。cubic-bezier(0.25, 0.1, 0.25, 1.0)と同等）
- linear （一定の速さ。cubic-bezier(0.0, 0.0, 1.0, 1.0)と同等）
- ease-in （滑らかに始まる。cubic-bezier(0.42, 0, 1.0, 1.0)と同等）
- ease-out （滑らかに終わる。cubic-bezier(0, 0, 0.58, 1.0)と同等）
- ease-in-out （滑らかに始まり、滑らかに終わる。cubic-bezier(0.42, 0, 0.58, 1.0)と同等）
- cubic-bezier （ベジエ曲線を直接数値で指定。cubic-bezier(x1,y1,x2,y2)で指定）
easeとease-in-outがややこしいですが、数値的には、easeの方がさらに滑らかに終わりそうです。
ここが一番やっかいなのがcubic-bezierです。
これは、x範囲0.0 – 1.0とy範囲0.0 – 1.0の変化域で座標値を２点指定します。その他２点は(0.0, 0.0)と(1.0, 1.0)です。
これら４点を使ってベジエ曲線が計算され、この曲線がそのままトランジションの加速度として扱われます。
いい忘れていましたが、これも今のところベンダープリフィックスをつけておく必要があります。
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-ms-transition-property: background-color;
-o-transition-property: background-color;
こんな感じでつけておきましょう。
ちなみに僕のページでは画像を２枚用意しまして（背景色を変えるだけでは表現できなかったので）、透過度を変えています。
画像を全く同じ位置に配置しないといけないので、positionをabsoluteにしています。
他にもいろんな使い方があると思うので、いろいろ遊んでみたいと思います。
