Web制作

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

2016.03.09

2017.05.18

伏せられたトランプ

ボタンにマウスをロールオーバーすると背景色が変わるというあしらいは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で変化させる時間を設定します。初期値は0で時間を設定しない場合はアニメーションしません。

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.

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。