CSSでネオンサイン風の点滅アニメーション

CSSのアニメーションを使って簡単にネオン風のアニメーションを作ることができます。使う場面はあまりないかもしれませんが、スニペットの1つとして紹介します。

ネオン風


<div class="neon">N<span>eo</span>n</div>

.neon {
  display: inline-block;
  color: #fff;
  letter-spacing: .05em;
  font-size: 5em;
  text-shadow: 0 1px 30px #FB1684, 0 0 12px #fff, 2px 5px 60px #990a52;
}
.neon > span {
  -webkit-animation: blink 3s infinite alternate;
  animation: blink 3s infinite alternate;
}
@-webkit-keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}
@keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}

点滅させたい文字を span で囲み、@keyframes を使って点滅させています。