白のtext-shadowで文字が光ってる風にフェードインしてくる

htmlは文字1つ1つをspanタグで作っておく。
spanタグそれぞれに同じアニメをdelayだけ少しずつズラしながら適用させる。
scss環境であればdelayの部分を効率的に書ける。

span {
      animation: letter-glow 0.5s 0s ease both;
      &.hasMargin {
        margin-left: 10px;
      }
      @for $i from 1 through 9 {
        &:nth-child(#{$i}) {
          animation-delay: ($i - 1) * 0.08s;
        }
      }
    }
    @keyframes letter-glow {
      0% {
        opacity: 0;
        text-shadow: 0px 0px 1px rgba(255,255,255,0.1)
      }
      66% {
        opacity: 1;
        text-shadow: 0px 0px 10px rgba(255,255,255,0.9)
      }
      77% {
        opacity: 1
      }
      100% {
        opacity: 1;
        text-shadow: 0px 0px 10px rgba(255,255,255,0)
      }
    }