【初心者でもできる】ホバー時に、ほわっと色を変えるスタイルシート

マウスホバーしたときに、ボタンやテキストの色をほわーっと変えるアニメーションを実現するスタイルシートの書き方を紹介します。

まずは デモページ をご確認ください。

では、実際の書き方をご紹介します。

まずは、ほわーっとさせたいリンクを作ります。

<a href="#" class="example">ほわーっと変わるよ</a>

続いて、このリンクを装飾してみます。

a.example {
padding: 10px 10px;
background: #BA68C8;
color: #fff;
}
a.example:hover {
background: #f44336;
}

ホバー時とそうでないときの背景色を変えてます。

これだけだと、ホバー時の色の切り替えが、ほわーっとなりません。キリッと変わります。
デモページでもご紹介している通りな感じで。

では、「ほわーっと」を実現するためのおまじないを書き加えます。
これは「CSS3 Transitions」というもので、

a.example {
padding: 10px 10px;
background: #BA68C8;
        color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
a.example:hover {
background: #f44336;
}

5〜8行目を書き加えました。

「transition: all 0.3s ease;」は、3つのことをまとめて書いており、分解すると下記のようにも書けます。

transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;

まぁ、いちいち個別に書く必要はほとんどないので、まとめて書く方を覚えておきます。

ちなみに、「all」はすべてのプロパティという意味で、上記のhoverで指定しているのは、「background」のみなので、この例でいくと、「all = background」ってことになりますね。

「0.3s」は、変化をどれくらいで表現するかです。0.3秒ってことですね。

「ease」は、変化の具合。

  • default
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier() 4つの数字をカンマ区切りで指定

上記の中から指定できます。それぞれどんな感じに表現されるか、試して見てください。

サイト制作に慣れてくると、hover時のtransitionアニメーションは、結構使うシーンが多いと思います。
JavaScriptなどを書くよりは手軽で、大変重宝しますよ!

あわせて読みたい