そもそもホバーアニメーションって？

今回のお題は、

「ホバーアニメーション」です！

聞き慣れない方もいるかと思いますが、おそらく多くの方は見たことがあるであろうアニメーションです。

実際に動きを見てみましょう。下のボタンにカーソルを当ててみてください。

Focus Here!

文字の色や背景色が変化しましたか？

このように、ホバーアニメーション(hover animation)とは、

ある要素にマウスカーソルが重なったときのアニメーションのことを指します。

どんな時に使うの？

リンクボタンを設置する際に、度々設定します。

設定しなかった場合を試しに見てみましょう。

ただリンクを追加しただけだと、このように表示されます。

※リンク先に飛ばないようにする設定だけしています。

一般的なリンク

味気なかったり、どこまでがリンクボタンの範囲か分かりづらかったり…と、このままでは使いづらいです。

そのため、デザイン性を追加したり、ユーザーにとって使いやすくしたりするために、デザインの装飾以外にホバーアニメーションを追加することがあります。

どうやって実装しているの？

/* HTML */
<a class="hoverbox">Focus Here!</a>

/* CSS */
.hoverbox{
  display: block;
  width: 80%;
  max-width: 250px;
  padding: 1em 0;
  border: 2px solid white;
  margin: 20px 0;
  background-color: #2E2B2B;
  color: white;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}

.hoverbox:hover{
  border: 2px solid #2E2B2B;
  background-color: white;
  color: #2E2B2B;
}

hoverを設定すると、マウスカーソルが当たったときのCSSの設定ができます。

transitionを設定しておくと、すぐに切り替わらず、スッと変化するような設定が可能です。

まとめ

• ホバーアニメーションは、ある要素にマウスカーソルが重なったときのアニメーションのこと。
• デザイン性を追加したり、ユーザーにとって使いやすくしたりするために設定される。

次回は、今回ご紹介したホバーアニメーションの例をいくつかご紹介します！