2012/02/23更新

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

このエントリーをはてなブックマークに追加            

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

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




f:id:yoheiM:20110501192311p:image

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

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




f:id:yoheiM:20110501191741p:image

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

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




f:id:yoheiM:20110501191740p:image

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

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




最後に

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







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。