CSS3はアニメーションも指定できる！

2008年8月10日 00:34

先日、CSS Reloadedというイベントに参加してきました。
そこではCSS3の可能性を示唆していました。

内容としてはとても刺激的で、将来、現在あるJavascriptライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。

ただ問題点として、対応ブラウザがwebkit系（Safari）しかないこと。
また、正式にCSS3として勧告されているわけではないこと（今Safariでできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。

ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通りSafariでしか実行できないため、サンプルを見る際にはSafariで見てください。（Safariのダウンロードはこちらから）

↓実際に動いているところを動画でキャプチャしたところ。

実際の『CSS Transition』のサンプルはこちら

▼EntryMore▼

上のサンプルで見てもらったアニメーションは、すべてCSSの簡単な指定だけで実現しています。下にソースサンプルを書きます。

CSSソース

見てもらうと分かるように、たったこれだけです。
この数行を、普通のCSSのように書き連ねるだけでサンプルのようなアニメーションができるのです。簡単でしょ？

まだCSS3については最近調べ始めたので、細かいことは説明できませんが、自分で理解している範囲で説明したいと思います。
また、webkit系ブラウザだけの独自実装のため、-webkit-という接頭語（プレフィクス）をつける必要があります。

今回の肝は、「-webkit-transition」です。
これは、”変化の状態を指定する”プロパティです。
上記サンプルで書かれているものは

-webkit-transition-propaty: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;

です。
-webkit-transition-propaty（以下、すべて-webkit-transitionを省きます）は、なんのプロパティが変化の対象になるか、を指定します。サンプルでは「all」なのですべての変化が対象です。

個別に指定する場合は、通常のCSSプロパティで指定します。例えば「height」や「background-color」などが一番使われそうでしょうか。（実際のサンプルも、「height」と「background-color」だけ変化させています）

durationは、変化が起きるとき、どれくらいの時間をかけて変化するのか、その時間を”秒数”で指定します。サンプルの場合は1秒かけて変化が起きる指定です。
つまり、:hover疑似クラスで背景の色が白から赤に変わる用に指定していた場合、マウスオーバー時に白から1秒かけて赤に変化していくことになります。（イメージとしては時間的なグラデーション？）

たとえばこれを透明度に応用すれば、徐々に消えていく演出や、徐々に現れる演出などにも使えます。
これを現状で実装しようとすると、prototype.jsとscriptaculous.jsなどを組み合わせたりしてJavascriptで実装するしかありません。

最後にtiming-function。
これは、効果の加速度などを制御するプロパティとなります。
Flashを作ったことがある人なんかは、イージングの指定というとわかりやすいと思います。
イージングとは（自分的解釈なので間違ってたらすいません；）、効果の度合の時間配分を行う設定です。

一定時間と設定すると、効果は単調で一定のスピードで変化します。
これを、最初を早く、終わりを遅く、という設定にすると、まるで車がブレーキをかけたような感じで変化します。（最初は早く変化し、終わりに近づくにつれて変化が少なくなっていく感じ）

以上が先日参加したCSS Reloadedで覚えてきた驚きのCSSプロパティです。（ほんとは他にもあるけど、これが一番興奮した）
今回は説明だけにとどめて、次回はこれを応用してちょっと面白い効果を作ってみたいと思います。