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

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

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

完成形

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

Sample01

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

See the Pen mdJEoQx by natsuki (@natsukimemo) on CodePen.

Sample02

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

See the Pen JjdNQMB by natsuki (@natsukimemo) on CodePen.

コード

後ほど詳しく説明していきますが全体像を把握した方が理解しやすいと思うので、まず下記の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. Aの状態を(変化前の状態)
  2. トリガー(クリックなどをきっかけに)
  3. Bの状態へアニメーションで変化させる(変化後の状態)

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

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

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

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

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

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

1-5.transitionのプロパティ

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

プロパティ名内容初期値
transition-propertyトランジションを適用するCSSプロパティを指定all
transition-durationアニメーションしている時間を指定0
transition-timing-functionアニメーションの進行速度を指定ease
transition-delay遅延時間を指定0

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

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

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

transition: all 1.5s(1) ease 1s(2) ;

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

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

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

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

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

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

スポンサーリンク

2. コードの説明

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

Sample01

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

See the Pen mdJEoQx by natsuki (@natsukimemo) on CodePen.

<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は下記の構成になっています。

CSS2行目~8行目 変化前の要素の状態
CSS11行目の:hover トリガー
CSS12行目~13行目 変化後の状態

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

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

CSS9行目 transition: all(1) 1.0s(2) ease(3);

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

(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が文字とともに拡大され、更に背景色が変化します。
マウスオーバーした要素ではなく、その兄弟要素をアニメーションさせています。

See the Pen JjdNQMB by natsuki (@natsukimemo) on CodePen.

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の構成ですが、下記のようになります。

CSS1~10行目 .en01の指定
CSS12~20行目 .en02の変化前の状態を指定
CSS23行目 .en01に:hover(トリガー)を指定
CSS23~30行目 .en02の変化後の状態を指定

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

CSS23行目 .en01:hover + .en02{

隣接セレクタとは

要素同士を結合子 [+] で結ぶことで、隣接した次の要素に対してCSSスタイルを指定することができます。

例: A + B { CSSスタイル }
Aに隣接する次の要素Bに対してCSSスタイルを指定できます。

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

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

まとめ

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

スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク