2019年6月5日

CSSでつくるアニメーション – 塗りつぶし

はじめまして、WEBデザイナーの勝又と申します。よろしくお願いします。
このブログではCSS/JavaScriptを用いた演出などを中心に発信していきたいと思います。

初回となる今回は「背景を塗りつぶすCSS」をご紹介いたします。
backgroundに背景色を設定することでも可能ですが、細かい動きをつけたいときなどはもう一工夫必要になります。

実装例

今回は疑似要素”before”を用いて実装してみました。
背景色を付けたbefore要素をtransition:scale(X,Y)で伸ばすことで塗りつぶしています。

transitionでの制御ですが、transition-originを設定することで塗りつぶしの起点を設定することができます。
下記の例で四辺から伸ばしているとおりです。

See the Pen
hover背景塗りつぶし
by 勝又隆行 (@katsumata)
on CodePen.

before要素の形を変更することで、塗りつぶし方を調整することも可能です。
下の例ではbeforeを円形にすることで、円状に塗りつぶしていくようにしています。

See the Pen
hover背景円形塗りつぶし
by 勝又隆行 (@katsumata)
on CodePen.

アニメーションの開始をマウスオーバーにしましたが、inview.jsなどと組み合わせるとコンテンツの表示などにも応用できそうですね。

LINEで送る
Pocket

label

katsumata

Written by
katsumata

CONTACT

お問い合わせ、ご依頼などは下記電話番号かメールアドレスまでご連絡ください。
※内容により回答までお時間をいただく場合がございます、予めご了承ください。

tel. 06-6534-9333

10:00-19:00(※土日祝を除く)