CSS3で新たに作られたプロパティ、transition。
これを使うとJavaScriptを使わなくても簡単にアニメーションの動きを付けることができます。
今回はCSS3プロパティ、transitionについてまとめてみました。
まずはちょっとしたデモ
マウスを乗せるとなめらかに色が変わっていくのがわかると思います。
こうしたアニメーションを付けられるのがtransitionプロパティです。
transitionの使い方
上のサンプルを使って解説していきます。
まずは変化前と変化後を指定します。
#test { background-color: #CCFFFF; } #test:hover { background-color: #00FFFF; }
もちろんこの状態ではアニメーションにはなりません。このCSSにtransitionプロパティを加えます。
#test { background-color: #CCFFFF; transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; /* opera */ -moz-transition: background-color 0.5s ease-out; /* firefox */ -webkit-transition: background-color 0.5s ease-out; /* chrome, safari */ -ms-transition: background-color 0.5s ease-out; /* ie */ } #test:hover { background-color: #00FFFF; }
transitionプロパティで変化を設定しました。
値はそれぞれ、「変化させるプロパティ」、「変化にかける時間」、「イージング」、「変化が始まるまでの遅延させる時間」の4つになります。
将来的にはtransitionのみで動作させられるようになると思いますが、現時点では-o-や-moz-などのベンダープレフィックスをつけてやる必要があります。
「変化させるプロパティ」は、当然ですがマウスオーバー前とマウスオーバー後で値を変えておかないとアニメーションしません。プロパティを複数指定したいときはカンマ区切りで指定します。すべて指定したい場合はallとします。初期値はallです。
「変化にかける時間」は数値と単位で指定します。単位は秒(s)でもミリ秒(ms)でも可です。3秒なら3s、500ミリ秒なら500msになります。初期値は0(アニメーションなし)です。
「イージング」は
- ease(開始と終了が滑らか、初期値)
- linear(一定)
- ease-in(ゆっくり始まる)
- ease-out(ゆっくり終わる)
- ease-in-out(ゆっくり始まってゆっくり終わる)
といったキーワード指定の他、cubic-bezier(数値, 数値, 数値, 数値)による数値指定も可能です。 ベジェ曲線による数値指定についてはtransition-timing-function-CSS3リファレンスを参考にしてください。
「変化が始まるまでの遅延させる時間」は、「変化にかける時間」と同様に時間を指定します。初期値は0です。
個別指定も可
上記ではtransitionプロパティとしてまとめて指定しましたが、個別に指定することも可能です。
「変化させるプロパティ」はtransition-property、
「変化にかける時間」はtransition-duration、
「イージング」はtransition-timing-function、
「変化が始まるまでの遅延させる時間」はtransition-delay
によって指定します。
いろいろなプロパティに使えるtransition
background-color以外にもtransitionはいろいろなプロパティに使えます。変化させられるプロパティの一覧についてはCSS Transitions Module Level 3を参照してください。
ただし、ブラウザによってはうまく動かないプロパティもありますので注意してください。