先日行っていた案件でクリックを促すようにボタン周りを点滅させて欲しいという要望があったので、今回はその方法について解説していきたいと思います。
CSSを使ってボーダーを点滅させる
それではまず今回の完成形を見てみましょう。
See the Pen
ボーダーを点滅 by junpei (@junpei-sugiyama)
on CodePen.
CSSのanimationを使う
今回の点滅は「最初から常に点滅を繰り返す」という物です。
そしてこれはCSSのみで実現可能です。
まずHTMLを見てみます。
<a href="" class="blink blinkBox">ボックス</a>
<a href="" class="blink blinkCircle">サークル</a>今回は四角と円の2種類でやってみます。
次にCSSです。
a {
text-decoration: none;
}
.blink {
align-items: center;
background-color: #e6e6fa;
border: 6px solid #cc2200;
color: #000;
display: flex;
font-size: 25px;
justify-content: center;
margin: 50px auto 0;
}
.blinkBox {
max-width: 100px;
padding: 20px 0;
width: 90%;
}
.blinkCircle {
border-radius: 50%;
height: 100px;
width: 100px;
}
@keyframes blinkAnimation {
0% {
border: 6px solid #cc2200;
}
100% {
border: 6px solid #efefef;
}
}
.blink {
animation: blinkAnimation 1s ease infinite alternate;
}ここでポイントとなるのは@keyframesの部分です。
ここでアニメーションの開始を0%、終了を100%となります。
今回はボーダーの色を点滅させるので、開始時には赤、終了時には薄いグレーにして、これをアニメーションによって滑らかに変化させます。
@keyframes blinkAnimationの「blinkAnimation」ですが、これは任意なので分かりやすい名前にします。
そして最後のコードがアニメーションを実行させるコードになります。
animationというプロパティはanimation関連のプロパティを一括で指定するショートハンドプロパティです。
backgroundみたいなものですね。
ここでは以下のように設定しています。
- blinkAnimation → アニメーションの名前
- 1s → アニメーションが始まってから終わるまでの時間
- ease → アニメーションの変化の仕方
- infinite → アニメーションの繰り返し回数（infiniteは無限）
- alternate → アニメーションの再生方向を指定
最後のalternateがイメージしにくいかと思いますが、alternateは順方向と逆方向のアニメーションを交互に繰り返します。
これを設定していないと、開始から終了までは滑らかにアニメーションしますが、終了後はパッと戻ってしまいます。
戻るときも滑らかにアニメーションさせたい時は必要な項目となります。
IEでの注意点
chromeであればborderは@keyframesだけに書けば大丈夫ですが、IEの場合は上記を例にすると.blinkにあるborder: 6px solid #cc2200;を設定しないと点滅しません。
IEでは点滅しなくて少々手こずりました。。。