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

Webデザイン入門オンライン講座 Udemy

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

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

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

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

<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;」は、３つのことをまとめて書いており、分解すると下記のようにも書けます。

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などを書くよりは手軽で、大変重宝しますよ！