CSS3のTransitionsでJavaScriptなしにHTMLに動きを
こんにちは、宗定洋平（@yoheiMune）です。
CSS3のTransitionsという要素を紹介します。
TransitionsとはJavaScriptを使わずにCSSのみでHTML要素に動きを与えることができます。凄いなと思ったのは、CSSのみで動きが出るというところ。現在はまだ仕様策定中で、各ブラウザがそれぞれの実装をしているみたいです。今回作成したサンプルは、Webkit系ブラウザのChromeとsafariで動作します。以下がサンプルの画像です。実際に試す場合には、URLからサイトへ移動してください。
http://html5learner.appspot.com/html/css/transition.html
マウスをボックスの上に乗せる事で、各ボックスが右に移動します。移動する速度も何通りか指定可能。最初ゆっくり後速く、ずっと一定速度、など。
http://html5learner.appspot.com/html/css/transition.html
マウスをボックスの上に乗せる事で、ボックスの背景色と文字色がだんだんと変化します。段階的に変化させられる点が凄いなぁと思いました。
http://html5learner.appspot.com/html/css/transition.html
画像にマウスを乗せる事で、画像を入れ替えることができます。これも徐々に画像が切り替わります。
