記事内に広告が含まれています。

CSSでマウスオーバー時にアニメーションで色を変える方法

Mar 1, 2020

CSS,HTML,JS , コーディング

マウスオーバー（:hover）をするとふわっと色が変わるボタンの作り方です。
CSSアニメーションのtransitionプロパティを使った方法をご紹介します。

CSSアニメーションには@keyframes(キーフレーム)によるものと、transitionによるものがあります。
以前、@keyframesによるアニメーションについて記事にしましたので、今回はtransitionによるアニメーションの基本について書こうと思います。

完成形

この記事では、下記の二つのサンプルについて説明していきます。

Sample01

下のsample01は、ボタンをマウスオーバーすると、ふわっとアニメーションで背景の色が変わり、更に文字が拡大されます。

Sample02

下のsample02は、円01をマウスオーバーすると、円02が文字とともに拡大され、更に背景色が変化します。
マウスオーバーした要素ではなく、その兄弟要素をアニメーションさせています。

コード

後ほど詳しく説明していきますが全体像を把握した方が理解しやすいと思うので、まず下記のsample01のコードを見てみてください。

HTMLは一行のみです。

<div class="button01">sample01</div>

CSSは下記になります。
sample01のアニメーションはCSS9行目のtransitionプロパティによってなされています。
アニメーションさせているCSSはこの一行だけで、他のCSSは全てマウスオーバーやデザインに関するCSSです。

.button01 {
    width:200px;
    border-radius:50px;
    padding:20px 0;
    color:#FFF;
    font-size:20px;
    text-align:center;
    background-color:#ff8800;
    transition:all 1.0s ease;
}
.button01:hover {   
    background-color:#ae83cd;
    font-size:24px;       
}

それでは、transitionプロパティについて詳しく見ていきましょう。

1. transitionの基本

1-1.構成

transitionは要素がAの状態だったものを、クリックやマウスオーバーをきっかけに（これをトリガーといいます）、Bの状態へとアニメーションで変化させます。

1-2.トリガーについて

トリガーとは、ユーザーによるマウスオーバーやクリックなど、きっかけになる出来事が起こった時、自動的に特定の処理を行うことです。
トリガーとなるのは:hover、:active、:target、:focus、:checkedなどユーザーのアクションによるものの他、jQueryのイベントやメディアクエリもトリガーになります。

1-3.アニメーションの対象

トリガーを指定した要素そのものだけでなく、その子孫要素や兄弟要素などもアニメーションさせることができます。

1-4.transitionプロパティの記述場所

transitionプロパティは変化後ではなく変化前の要素に記述します。

1-5.transitionのプロパティ

transitionのプロパティは以下の4つです。

1-6.ショートハンドプロパティ

上記4つのプロパティに加えて、プロパティを簡略化して一行で記述できるショートハンドプロパティ「transition」があります。

下記のようにプロパティの値だけを書きます。

上記コードのルビ(1)と(2)は時間を指定するプロパティです。
プロパティは任意の順序で記述できますが、時間を指定する下記プロパティは順番が決まっています。

1つ目がtransition-duration(アニメーションしている時間の指定)・・・ルビ(1)
2つ目がtransition-delay(遅延時間を指定)・・・ルビ(2)

時間に関するプロパティは順序を逆にすることができません。

1-7. transitionのプロパティの省略

transitionのプロパティは、省略することもできます。
省略されたプロパティは初期値が適用されます。

時間を指定するプロパティを一つしか記述しなかった場合は、transition-durationプロパティとみなされます。

2. コードの説明

それではコードを詳しく見てみましょう。

Sample01

マウスオーバーすると、ふわっとアニメーションで背景の色が変わり、更に文字が拡大されます。

<div class="button01">sample01</div>

.button01 {
    width:200px;
    border-radius:50px;
    padding:20px 0;
    color:#FFF;
    font-size:20px;
    text-align:center;
    background-color:#ff8800;
    transition:all 1.0s ease;
}
.button01:hover {   
    background-color:#ae83cd;
    font-size:24px;       
}

このCSSは下記の構成になっています。

冒頭でも触れましたが、アニメーションに必要なCSSは9行目の一行のみです。
他はマウスオーバーやボタンのデザインに関する指定なので説明は省略します。

それでは9行目を詳しく見ていきましょう。

これは、プロパティの値だけを記述するショートハンドプロパティです。

(1). all

transition-propertyの値です。
トランジションを適用するCSSプロパティを指定できます。
適用の対象となるのは、transitionを指定している要素です。

「all」は、全てのCSSプロパティにtransitionを適用する、という意味です。
sample01の場合、.button01のCSSプロパティ（CSS2行目から8行目）にtransitionを適用する、ということです。

例えばcolorだけ変更したい場合は、下記のように書きます。
transition: color 1.0s ease;
ですが、仮に「all」に指定したとしても変化後のCSSにcolorの指定しかしなければ、colorしかアニメーションしません。

(2). 1.0s

transition-durationの値です。
1.0sの「s」はsecond（秒）ということで、アニメーションしている時間を1秒に指定しています。

(3). ease

transition-timing-functionの値です。
アニメーションの進行速度を指定しています。
「ease」は、アニメーションの最初と最後を少しゆっくり（滑らか）にしています。

以上のCSSで、マウスオーバーをするとふわっと色が変わり文字が拡大するボタンを実装することができます。

Sample02

下のsample02は、円01をマウスオーバーすると、円02が文字とともに拡大され、更に背景色が変化します。
マウスオーバーした要素ではなく、その兄弟要素をアニメーションさせています。

HTMLは2行のみです。

<div class="en01">01</div>
<div class="en02">02</div>

CSSです。
21行目で.en02にtransitionプロパティを、23行目の.en01:hoverでトリガーを指定しています。

.en01 {
    width:80px;
    height:80px;
    background-color:#ff8800;
    border-radius:50%;
    font-size:18px;
    color:#FFF;
    line-height:80px;
    text-align:center;
    margin-bottom:10px;     
}
.en02 {
    width:80px;
    height:80px;
    background-color:#ff8800;
    border-radius:50%;
    font-size:18px;
    color:#FFF;
    line-height:80px;
    text-align:center;
    transition: all 2.0s ease;
}
.en01:hover + .en02{
    width:180px;
    height:180px;
    line-height:180px;
    background-color:#ae83cd;
   color:#ff0;
  font-size:60px; 
}

まず、このCSSの構成ですが、下記のようになります。

CSSでポイントとなるのは、23行目の隣接セレクタです。

.en01:hover + .en02{ } と書くことで
.en01にはマウスオーバー を
隣接した次の要素である.en02にはスタイル を
指定することができます。

このようにセレクタの書き方次第で、トリガーとなる要素とアニメーションする要素を別にすることができます。
これは隣接セレクタに限らず子孫セレクタなどでも同様です。

まとめ

transitionの使い方の基本について書いてみました。
この記事がお役に立てると幸いです。

【番外】WEB制作習得におすすめの本

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。