CSS3 アニメーション（transition）の使い方

CSS3のお勉強。今回はアニメーション（transition）の指定方法の一例。
この記事内のサンプルはsafari, Google Chromeで動作。

下記はロールオーバーすると背景色が変化するというコード。

transition sample1 - jsdo.it - share JavaScript, HTML5 and CSS

上記のコードは

　-webkit-transition: background-color 1s linear;

と省略して書くこともできる。

　-webkit-transition:[変化させる要素] [何秒] [変化するタイミング]

という感じ。

[変化させるタイミング]で指定できる値は

・default
・linear（一定のスピード）
・ease-in
・ease-out
・ease-in-out
・cubic-bezier() 4つの数字をカンマ区切りで指定

次に背景色と幅を変更したい場合は、

transition sample2 - jsdo.it - share JavaScript, HTML5 and CSS

複数変化させる場合は ,(カンマ)をつかって複数しているすることもできる。というか[変化させる要素]もいらないみたい。動いた。

transition sample3 - jsdo.it - share JavaScript, HTML5 and CSS

画面外に飛ばすこともできるみたいw

transition sample4 - jsdo.it - share JavaScript, HTML5 and CSS

FlashみたいにタイムラインでアニメーションつくるSencha Animatorっていうのもあるけど、基本知りたかったのでコード書いてみた。

他にもいろいろできそうなのでもうちょっと調べよう。

参考サイト：CSS Lecture | CSS3 アニメーション（Transitions）の使用方法