CSSのみでボタンを点滅させてWebサイトのアクセントに！

本日はCSSのみでボタンを点滅させる方法を紹介します。
CSS3のアニメーションを使用してループさせます。

box-shadowを使用しますので、オブジェクトの大きさも変わりませんので、他の要素にも影響を与えにくい方法です。

設定方法

animationで設定している0.5sが1ループの長さです。ここを調整してアニメーションのスピードなどを調整してください。
@keyframesで設定しているのがアニメーションの細かな動きの設定です。今回はbox-shadowを設定していますが、ここでwidthやbackgroundなど変化させてたいプロパティーを設定すると、設定したプロパティーを変化させることができます。0%で設定するのが、アニメーション開始時の設定、100%で設定するのがアニメーション終了時の設定です。細かく途中の動きを制御したい場合は50%、30%などで設定すると途中の動きも制御できます。

使用シーン

Webサイトにおいて今回のボタンのような動きのあるあしらいは目立ちやすく、効果的な反面、閲覧者の注意を引きすぎてしまい、本当に伝えたい情報に意識が向かなくなるデメリットもあります。
使用シーンとしては、LPなどのコンバージョンポイントでここぞという場面で使用したり、要素や飾りが少ないが閲覧者の注意を引きたい場合に使用することに向いています。

参考にしてみてください。