CSSアニメーションでの点滅効果の作成方法

keyframesを使用したアニメーション:

@keyframes blinking {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.element {
  animation: blinking 1s infinite;
}

上記の例では、blinkingという名前のキーフレームを定義し、opacityプロパティを使用して要素の透明度を変更します。animationプロパティを使用して、blinkingアニメーションを1秒ごとに繰り返し実行します。

@keyframesを使用しないアニメーション:

.element {
  animation: blinking 1s infinite;
}
@keyframes blinking {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

上記の例では、@keyframesルールをアニメーションルールの前に配置する代わりに、@keyframesルールをアニメーションルールの後に配置しています。これにより、同じ効果が得られます。

visibilityプロパティを使用したアニメーション:

.element {
  animation: blinking 1s infinite;
}
@keyframes blinking {
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
}

上記の例では、visibilityプロパティを使用して要素を表示および非表示に切り替えます。opacityプロパティを使用する代わりに、visibilityプロパティを使用して点滅効果を作成します。

これらはいくつかの基本的な方法ですが、他にもさまざまな方法があります。必要に応じてこれらのコード例をカスタマイズして使用することができます。CSSアニメーションの詳細については、公式のCSS仕様やチュートリアルを参照してください。