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

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

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

参考:第23回 HTML5と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;
}

コードをご覧いただくとわかるとおり、まだ各ブラウザーでは先行実装されているだけなので、ベンダープリフィクスが必要です。で、-moz-は一応書いてますが、まだ現行のFirefoxではサポートされていない模様。Operaも10.10だとまだ動かないかも。

「まだまだ使えないじゃん!」

と 思うなかれ、WebKitでイケる、ということはすなわちiPhoneやiPadではイケるわけです。タッチインターフェイスなので、hoverはちょいと相性わるいですが、それでもリンクをタップした直後にふわっと動いてくれました。(iPhone3GSで見てみました)

また、IEなどの非対応ブラウザーで見た場合も、transitionは再現されませんが、それ以外のルールは通常通り解釈されるので、PC向けのページに実装するのも大いにアリかもしれません。

次回はAnimationsモジュールについて触れる予定です。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSS3アニメ設定方法【Animationsモジュール】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読