transition を使ってマウスオーバー/アウト時にアニメーションの動きを変える

要約

• マウスオーバーでアニメーションをさせたい時、 transition プロパティを :hover にのみ指定すると、マウスアウトした時に瞬時に戻る
• 上を逆手に取ると、マウスオーバー/アウトでアニメーションを変化させたり、マウスオーバーした時に複数の要素を段階的にアニメーションさせることが出来る

概要

CSSの transition プロパティを使う時、 :hover にだけ指定すると、マウスアウトした時に無効になり瞬時に変化してしまいます。
これはマウスオーバー時にのみその transition が有効になっているからですが、それを逆手に取って、マウスオーバー/アウト時にそれぞれ異なったアニメーションを発生させることもできます。
transition はプロパティごとに指定できるので、異なったプロパティを変化させることも可能です。

例：マウスオーバー/アウトでアニメーションの速さを変える

See the Pen transition-1-3 by semigura (@semigura) on CodePen.

応用すると、リンク内の複数の要素に違う transition を指定して段階的に変化させていくということもできます。
ただしこの時、変化させるプロパティを要素ごとに書いていく必要があります。

例：マウスオーバーで複数の要素を段階的に変化させていく

See the Pen transition-1-3 by semigura (@semigura) on CodePen.