[HTML5] CSS3のTransitionsでJavaScriptなしにHTMLに動きを

CSS3のTransitionsという要素を紹介します。

TransitionsとはJavaScriptを使わずにCSSのみでHTML要素に動きを与えることができます。 凄いなと思ったのは、CSSのみで動きが出るというところ。 現在はまだ仕様策定中で、各ブラウザがそれぞれの実装をしているみたいです。 今回作成したサンプルは、Webkit系ブラウザのChromeとsafariで動作します。 以下がサンプルを置いているサイトです(｀・ω・´)

http://www.yoheim.net/labo/html5/css3/transition.html

マウスをボックスの上に乗せる事で、各ボックスが右に移動します。 移動する速度も何通りか指定可能。最初ゆっくり後速く、ずっと一定速度、など。

http://www.yoheim.net/labo/html5/css3/transition.html

マウスをボックスの上に乗せる事で、ボックスの背景色と文字色がだんだんと変化します。段階的に変化させられる点が凄いなぁと思いました。

http://www.yoheim.net/labo/html5/css3/transition.html

画像にマウスを乗せる事で、画像を入れ替えることができます。これも徐々に画像が切り替わります。

最後に

このTransitionsというCSSは凄いなと思いました。 使えるようになれるとより簡単に凄いWebページが作成出来るようになるはず。将来が楽しみです。