CSSを使ってボーダーを点滅させる方法

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！

今回は、

ボーダーを点滅させる方法ない？

といった方に対する記事となります。

先日行っていた案件で、クリックを促すようにボタン周りを点滅させて欲しいという要望があったので、今回はその方法について解説していきたいと思います。

1 今回の完成形
2 CSSのanimationを使う
- 2.1 IEでの注意点

今回の完成形

それではまず今回の完成形を見てみましょう。

See the Pen
ボーダーを点滅 by junpei (@junpei-sugiyama)
on CodePen.

CSSのanimationを使う

今回の点滅は「最初から常に点滅を繰り返す」という物です。

そしてこれはCSSのみで実現可能です。

まずHTMLを見てみます。

<!-- html -->
<a href="" class="blink blinkBox">ボックス</a>
<a href="" class="blink blinkCircle">サークル</a>

今回は四角と円の2種類でやってみます。

次にCSSです。

<!-- 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みたいなものですね。

ここでは以下のように設定しています。