簡単なCSSで背景色をふわっと変化させる方法

ボタンにマウスをロールオーバーすると背景色が変わるというあしらいはWebサイトでよく見かけます。
動きがあることで、Webサイト訪問者に直感的にその場所がボタンであるということを伝えることができます。

今回はそのあしらいに一手間加えることで一味違うロールオーバーを実現する方法を紹介します。

transition プロパティ

transitionはCSSのプロパティを設定した時間で変化させるプロパティです。今回背景色をふわっと変化させるために使用します。transition-property、transition-duration、transition-timing-function、transition-delayで設定します。ショートハンドで記述する場合は半角スペースでそれぞれを設定し、一つ目の時間の値はtransition-durationに二つ目の時間の値はtransition-delayに適応されます。

transition-property

transitionで変化させるプロパティーを設定します。初期値はallでtransitionが適応できるすべてのプロパティに適応されます。

transition-duration

transitionで変化させる時間を設定します。初期値は０で時間を設定しない場合はアニメーションしません。

transition-timing-function

transitionで変化させる変化の仕方を設定します。一般的にはイージングと言った方が馴染みがあるかと思います。ease、linear、ease-in、ease-out、ease-in-outが設定できます。初期値はeaseです。

transition-delay

transitionで変化させるタイミングを設定します。初期値は0で設定しない場合は即アニメーションが開始します。

ロールオーバーするとふわっと背景が変化するボタン

See the Pen XdXoQB by tetsuro (@tetsuro) on CodePen.