要約
- transition プロパティは
:hoverに指定してしまうと、マウスアウトした時に瞬時に戻ってしまう - ので、アニメーションさせたい要素そのものに transition を指定する
概要
CSSでアニメーションを付与するプロパティには transition と animation プロパティがあります。
複雑なアニメーションには animation が向いていますが、そのまま使うとマウスアウトに巻き戻しが起こらないということもあり、リンクホバーなど簡単なアニメーションでは transition を使う場合が多いと思います。
問題
しかし、transition を使っているのにもかかわらず、マウスアウト時にアニメーションせず、瞬時に戻ってしまう時があります。
原因は transition を付与する場所です。
:hover に transition を指定してしまうと、マウスアウトの時に巻き戻るアニメーションが起こらず、瞬時に戻ってしまいます。
これはtransitionが :hover = マウスオーバー時にのみ有効になっているからです。
例：transition が :hover に指定されている
See the Pen
transition-1-1 by semigura (@semigura)
on CodePen.
解決
これを防ぐには、アニメーションさせたい要素そのものに transition を付与します。
例：transition が要素そのもの に指定されている
See the Pen
transition-1-2 by semigura (@semigura)
on CodePen.
ちなみにこれを逆手に取ると、マウスオーバー/アウト時にアニメーションの動きを変えることが出来ます。