第48回　CSS3のアニメーションの設定方法
【Transitionsモジュール】テーブルレイアウトを卒業しよう

CSS3のアニメーションの設定方法

だいぶ前の記事で簡単なCSS3アニメーションのデモをご紹介しましたが、今日はその具体的な作り方についてご説明します。

今回は、Transitionsモジュールで定義されているプロパティの扱い方を解説します。CSS3のアニメーションには、Transitionsモジュール以外にも、Animationsモジュールというのがありますが、それはまた別の機会に。

Transitionsモジュールとは

Transitionとは、和訳すると「変化」や「変遷」です。つまり、「ある状態から別の状態への変化」を設定することができるわけです。

次のようなプロパティがあります。

transition-property

どのCSSプロパティを変化させるかを指定します。複数のプロパティを対象とする場合は、カンマで区切ります。値は次の通り。

all（初期値）: 全てのプロパティを対象とする
none: 全てのプロパティを対象としない
プロパティ名: 対象とするプロパティ。（例えばbackground,marginなど）

transition-duration

プロパティの変化にかける時間を指定します。値は秒単位(s)で指定できます。

0（初期値）: ゼロ秒で変化します。
秒単位で指定: 例えば2sと指定すると、2秒間かけて変化します。

transition-timing-function

時間内でのプロパティの変化度合いを指定します。チョイわかりづらいですが、FlashやShilverlightでは「イージング」とよばれるものですね。加速とか減速とも言えます。

ease（初期値）: 滑らかに開始し、滑らかに終了します。
linear: 一定に変化します。
ease-in: ゆっくり変化し始め、加速します。
ease-out: 急速に変化し始め、減速します。
ease-in-out: ゆっくり変化し始めて加速し、減速しながら終了します。

transition-delay

変化が始まるまでのディレイ（遅延）を指定します。

0（初期値）: 遅延なしですぐに変化が始まります。
秒単位で指定: 例えば2sと指定すると、2秒間後に変化が始まります。

簡単なデモをつくってみました。 Safari 4以上かOpera 10.50で見ていただくのが一番スムーズに動くと思います。なぜか最新のChromeさんはvisitedがちょっとイマイチ。WebKitのバージョン的には問題なさそうなんですが…。

デモを見る

文字化けする場合はブラウザーのエンコードをUTF-8に変更して下さい。

コードはこんな感じです。

<a href="http://www.example.com/">example.com</a><br /> 
<a href="http://www.example.net/">example.net</a><br />
<a href="http://www.example.org/">example.org</a><br />
<a href="http://m-school.biz/">back</a>

a {
     font-family:Verdana, Geneva, sans-serif;
     font-size: 10em;
     color: #FFF;
     background-color: #CCC;

     /* -for webkit- */
     -webkit-transition-property: color, background-color;
     -webkit-transition-duration: .8s;
     -webkit-transition-timing-function: ease-in;

     /* -for mozilla- */
     -moz-transition-property: color, background-color;
     -moz-transition-duration: .8s;
     -moz-transition-timing-function: ease-in;

     /* for prest- */
     -o-transition-property: color, background-color;
     -o-transition-duration: .8s;
     -o-transition-timing-function: ease-in;
}
a:visited {
     color: #FC9;
     background-color:#66F;
}
a:hover {
     color: #FFF;
     background-color: #0CF;
}
a:active, a:focus {
     color: #CCC;
     background-color:#FFC;
}