先日行っていた案件でクリックを促すようにボタン周りを点滅させて欲しいという要望があったので、今回はその方法について解説していきたいと思います。
CSSアニメーションでテキストやボーダーを点滅させる方法
それではまず今回の完成形を見てみましょう。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
今回作成したのは以下になります。
- ボックスのborder色変更（aタグ）
- 円形のborder色変更（aタグ）
- テキストの透過率変更（pタグ）
- テキストの色変更（pタグ）
CSSアニメーション自体はいろいろな事が出来ますが、今回は色と透過率の変化だけ解説していきます。
CSSの『animation』を使う
今回の点滅は『最初から常に点滅を繰り返す』という物です。
そしてこれはCSSのみで実現可能です。
まずHTMLを見てみます。
<a href="" class="btn">ボタン</a>
<p class="text-opacity">透過点滅</p>
<p class="text-color">色変更点滅</p>次にCSSです（レイアウトのためのスタイルは省略）
/* ボタンのアニメーション */
@keyframes blinkBorder {
0% {
border: 6px solid #cc2200;
}
100% {
border: 6px solid #efefef;
}
}
.btn {
animation: blinkBorder 1s ease infinite alternate;
}
/* テキストのアニメーション(透過率変更) */
@keyframes blinkOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.text-opacity {
animation: blinkOpacity 1s ease-in-out infinite alternate;
}
/* テキストのアニメーション(色変更) */
@keyframes blinkColor {
0% {
color: #00bfff;
}
100% {
color: #cc2200;
}
}
.text-color {
animation: blinkColor 1s ease-in-out infinite alternate;
}ここでポイントとなるのは@keyframesの部分です。
ここでアニメーションの開始が0%、終了が100%となります。
今回はボーダーの色を点滅させるので、以下のように設定します。
- ボタン：開始時の色は『#cc2200』、終了時の『#efefef』
- テキスト1：開始時の透過率は『0%』、終了時の透過率は『100%』
- テキスト2：開始時の色は『#00bfff』、終了時の『#cc2200』
そしてこの変化をアニメーションによって滑らかに変化させます。
それぞれ@keyframesのあとのblinkBorderやblinkOpacityは任意なので分かりやすい名前で大丈夫です。
そしてアニメーションの動きをanimationというプロパティを使って再現します。
animationというプロパティはanimation関連のプロパティを一括で指定するショートハンドプロパティです。
backgroundみたいなものですね。
ここでは以下のように設定しています。
- blinkBorder → アニメーションの名前
- 1s → アニメーションが始まってから終わるまでの時間
- ease → アニメーションの変化の仕方
- infinite → アニメーションの繰り返し回数（初期値は1で『infinite』は無限）
- alternate → アニメーションの再生方向を指定
最後のalternateがイメージしにくいかと思いますが、alternateは順方向と逆方向のアニメーションを交互に繰り返します。
これを設定していないと開始から終了までは滑らかにアニメーションしますが、終了後はパッと戻ってしまいます。
戻るときも滑らかにアニメーションさせたい時は必要な項目となります。
最後にプロパティを変えるとどうなるか見てみましょう。
『アニメーションの変化の仕方』と最後に『アニメーションの再生方向を指定』だけ変化させてみます（時間を短くするとチカチカするのでゆっくり1.5秒に設定）
See the Pen
CSSアニメーションサンプル by junpei (@junpei-sugiyama)
on CodePen.
『アニメーションの変化の仕方』については大きくは変わらないように見えるかも知れませんが『アニメーションの再生方向を指定』はalternateでないと点滅にはならないのが分かると思います。
まとめ
今回はCSSアニメーションでテキストやボーダーを点滅させる方法を解説しました。
CSSアニメーションは色んなことが出来るので、使いこなせるようになると楽しいと思います。
以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
