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

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