【CSS】オン・オフでtransitionの内容を変える(ホバーアニメーションなど)

例えばマウスオーバーのときのアニメーションで、マウスを乗せたときはゆっくりアニメーションして、マウスを外したときはすぐに元に戻したいなど、

オン・オフによってtransitionの内容を変えたいときがあるかと思います。

そんなときはこちら。

オンになったときだけアニメーションさせる時

例) マウスオーバーのアニメーションの場合

 
transitionの指定を.box:hoverの方に書いてあげればOK。
 

オンになったときとオフになったときでtransitionを変える

例) マウスオーバーのアニメーションの場合

 
オンのときのtransitionの指定を.box:hoverに、
オフのときのtransitionの指定を.boxの方に書いてあげればOK。