【CSS】要素を点滅させる方法

CSSはウェブデザインにおいて非常に強力なツールであり、さまざまな効果を作成するために使用できます。今回は、CSSを使用して要素を点滅させる方法を紹介します。この技術を使えば、注目させたいテキストや要素を目立たせることができます。

CSSアニメーションの作成

要素を点滅させるためには、CSSのキーフレームを使用します。以下は、基本的な点滅アニメーションのCSSコードです。

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.blinking {
  animation: blink 1s infinite;
}

このCSSコードでは、blinkという名前のキーフレームを定義し、要素の不透明度を変化させることで点滅効果を作り出しています。

HTMLでの使用方法

点滅させたい要素に.blinkingクラスを追加します。

<div class="blinking">点滅するテキスト</div>

サンプル