CSS3プロパティ

現在まだ策定中のCSS3ですが、いろいろなブラウザですでに実装されています。IEではまだ未対応ですが、Javascriptを使用しての実装も実現できているので使用されている方も多いことと思います。
今回のエントリーはCSS3のプロパティのブラウザごとの対応表をご紹介します。

CSS3プロパティ対応表

表を見てもらえばわかると思いますが、IEはほとんどサポートされていません。CSS3を使用するにあたって一番の壁がIEです。IE9でHTML5とともに対応させるとのことですが、それでもバージョンのシュアがあがってくるまでは扱いが難しいと言わざるをえません。

しかし、最近になって『Progressive Enhancement』という考え方が広まってきています。これは『新しい技術を積極的に利用してサポートブラウザのインタラクションの強化、ブラウザを使うユーザー体験の向上』を重要視した考え方です。新しい技術をブラウザのサポート不足のため導入できない、同一表示や機能を前提に制作しなければならない、といったクロスブラウザ考え方は、プラットフォーム（デバイス）の多様化している現在にはそぐわない、ということから広まってきたようです。
しかし、アクセシビリティが無視される制作方法も問題となることでしょう。導入は一考してからをおススメ致します。

注目CSS3プロパティ

CSS Tramsitions／CSS Animations

どちらもアニメーションを実装するものなのですが、『Transitions』は始点と終点の2つの値を指定することによって実現します。
『Animations』はキーフレームを使った指定ができますので、より細かい指定が可能になります。これによって現在Javascriptによって実装されているのもCSS3のみで要素の変化、移動、回転、ループなどが表現できるようになります。

こちらにデモを用意しました。
参考にして頂ければと思います。

デモ

実装方法

実装方法をご紹介します。
まずキーフレームを定義します。
キーフレーム「@-webkit-keyframes」+「アニメーション名」

@-webkit-keyframes example1 {
from {
top: 0px;
}

to {
top: 500px;
left: 280px;
}
}

キーフレームの中、from、to要素を用いてアニメーションの始点の状態と終点の状態を定義します。
from、toの代わりに、「%」指定で、経過時間毎の細かい変化を定義することもできます。

@-webkit-keyframes example2 {
0% {
top: 0px;
left: 0px;
}

50% {
top: 50px;
left: 50px;
}

100% {
top: 100px;
left: 100px;
}
}

定義したアニメーションを実際に使用する方法

適用したい要素に対して、適用するアニメーション名や、オプションを指定します。

div {
-webkit-animation-name: example; //名前
-webkit-animation-duration: 1s; //実行時間
-webkit-animation-iteration-count: 5; //実行回数、「infinite」と指定すると、回数無制限
-webkit-animation-direction: normal; //alternateにするとアニメーションが反復
-webkit-animation-play-state: running; //状態
-webkit-animation-delay: 2s; //待ち時間
-webkit-animation-timing-function: ease-in-out; //動きの速さの変化
}

もう少しやればいろいろできそうですね。
動作環境は、Safari4とGoogleChrome4です。WebKit仕様のHTMLレンダリングエンジンなら動作すると思います。
参考サイト
Falling Leaves — Using CSS Animations and Transforms
http://webkit.org/blog-files/leaves/index.html

ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、
予めご了承ください。

上記をご承知の方のみ、以下よりダウンロードしてください。

ダウンロードはこちら