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. マウスを下の画像に乗せてみてください。
Transition終了時にJavaScriptで処理を行う
Transition終了をJavaScriptで捉えることが出来ます。
例えば、以下のBoxにマウスホバーした際に動作するTransition終了時に、JavaScriptでalertダイアログを出力します。
Traditional Transition (using JavaScript)
Please click the box saying "Click Me!". "Click Me!"と書かれたボックスをクリックしてみてください