CSS Transition CSSでトランジションを実現する

Fantastic CSS Component - Transition. CSS Transition make the HTML object moving without JavaScript. This page is CSS Transition Sample Page. Please experience moving obects with CSS Transition.

面白いCSSの要素 - Transition - を紹介します。TransitionはJavaScriptなしで、HTML要素に変化を与えることができます。 このページはTransitionを利用したサンプルのページです。ぜひTransitionで実現された動きを体験してみてください。

Attention : Just work only with Webkit Engine - Chrome and Safari.



Moving to Left (using CSS Transition)

Please put your cursor on below box. マウスを下のボックスに乗せてみてください。
ease
linear
ease-in
ease-out
ease-in-out


Change Colors (using CSS Transition)

Please put your cursor on below box. マウスを下のボックスに乗せてみてください。

Background-color and Font color will change by degrees.



Change Images (using CSS Transition)

Please put your cursor on below image. マウスを下の画像に乗せてみてください。
Chrome Safari


Transition終了時にJavaScriptで処理を行う

Transition終了をJavaScriptで捉えることが出来ます。
例えば、以下のBoxにマウスホバーした際に動作するTransition終了時に、JavaScriptでalertダイアログを出力します。


Traditional Transition (using JavaScript)

Please click the box saying "Click Me!". "Click Me!"と書かれたボックスをクリックしてみてください
Click Me!