【CSS】簡単なフラッシュ（点滅）のCSSアニメーションサンプル

2018年3月14日2019年6月12日CSS,CSSアニメーション

アニメーションキーフレームを利用して、要素を点滅表示させる簡単なフラッシュ（点滅）CSSアニメーションのサンプルです

フラッシュ（点滅）アニメーションの動作サンプル

See the Pen Flush element CSS Animation by yochans (@yochans) on CodePen.

フラッシュ（点滅）アニメーションのサンプルコード

HTML

<p class="flash">FLUSH</p>

CSS

.flash{
  animation: flash 1s ease infinite alternate;
}

@keyframes flash {
  50% {
    opacity: 0;
  }
}

サンプルでは透過で簡単に点滅させているだけですが、背景色のある要素などは色の変更などでフラッシュ時のみ文字が浮かび上がる、など色々できますね