本題

タイトル通りではあるのですが大多数がどうでもいいと思うかもしれませんが見るたびに気になっていることについて書きます。

「細かいことが気になってしまう悪い癖」ってやつです。

気になるボタンの例

See the Pen Button Animation Bad by totoraj (@totoraj930) on CodePen.

:hoverをトリガーにしてtransformでアニメーションさせるよくあるボタンだと思います。

何が気になるのかは下のgifをみてもらえればわかるかと・・・

気になるところgif

  • :hoverされてボタンが動く
  • ボタンが動いたことでマウスポインタがボタン外に出る
  • :hoverがはずれて初期位置に戻る

といったことがループするのが気になる!!!ってことです。

特定の位置にマウスポインタがある場合のみ起こる事ではあるのですが気になりませんか?

僕は気になります。

解決策

解決策gif

See the Pen Button Animation OK by totoraj (@totoraj930) on CodePen.

buttonのなかにspan要素をいれて、buttonの:hoverでspanをアニメーションさせます。

buttonは:hoverを拾うためだけのダミーで本体はspanという状態ですね。

ですがbuttonの:hoverだけだとアニメーション後のspanの位置(buttonの範囲外)にマウスポインタが行くと戻ってしまうので spanの:hoverも定義しておかないといけません。

おわりに

少々手間がかかりますが派手にボタンを動かすときなどでは有効な手法だと思います。

以上、細かいことが気になるはなしでした。