hoverさせると荒ぶってしまう。
hoverなどを利用してボタンの色を変えたり、サイズを変更したりして何らかのアニメーションをつけることがあるかと思います。そんなとき範囲を考えて実装しないとマウスの挙動によってびっくりするぐらいアニメーションが荒ぶります。
荒ぶるボタン
See the Pen css bad_animation by moririn3464 (@moririn3464) on CodePen.
これはアニメーションする要素とhoverの判定をする対象が同じために起こります。
hoverが適用された瞬間にサイズが変わり、hover状態が解除され元のサイズに戻ろうとします。
しかし、マウスポインタが残っていると再度hoverが適用されるので、またサイズが変わります。
ループの完成です。
回避策
これを回避するには、hover要素と実際にアニメーションする要素を分ける必要があります。
See the Pen
css good_animation by moririn3464 (@moririn3464)
on CodePen.
アニメーションさせる要素の親要素にhoverを適用することで、
hoverが適用されている要素の状態は変化しないので、荒ぶることなくアニメーションが完了します。
まとめ
hoverでアニメーションさせるときは変化させる要素そのものにhoverを指定しない。