CSSで文字が１文字ずつフェードイン、フェードアウトするアニメーションのサンプルソースコード

ソースコード

カスタムプロパティ(変数)「--mamOpacityDelay」の値を使ってアニメーションの遅延時間を設定しています。

<div class="mamOpacity">
  <span><span style="--mamOpacityDelay:   0ms;">文</span></span>
  <span><span style="--mamOpacityDelay: 500ms;">字</span></span>
  <span><span style="--mamOpacityDelay:1000ms;">が</span></span>
  <span><span style="--mamOpacityDelay:1500ms;">現</span></span>
  <span><span style="--mamOpacityDelay:2000ms;">れ</span></span>
  <span><span style="--mamOpacityDelay:2500ms;">て</span></span>
  <span><span style="--mamOpacityDelay:3000ms;">消</span></span>
  <span><span style="--mamOpacityDelay:3500ms;">え</span></span>
  <span><span style="--mamOpacityDelay:4000ms;">る</span></span>
</div>
<style>
  .mamOpacity{
    font-size:32px;
    padding:4px;
  }
  .mamOpacity>span{
    position:relative;
    display:inline-block;
    width:1em;
    vertical-align:top;
  }
  .mamOpacity>span>span{
    position:absolute;
    color:#333;
    text-shadow:2px 2px 3px rgba(0,0,0,0.5);
    /*  アニメーション名 時間   ﾀｲﾐﾝｸﾞ  開始までの遅延時間    無限   順→逆再生  */
    animation:mamAniOpacity 14000ms ease-in-out var(--mamOpacityDelay) infinite normal both running;
  }
  @keyframes mamAniOpacity{
    0%{
      transform:scale(2,2);
      opacity:0.0;
    }
    5%{
      transform:scale(1,1);
      opacity:1.0;
    }
    60%{
      transform:scale(1,1);
      opacity:1.0;
    }
    65%{
      transform:scale(2,2);
      opacity:0.0;
    }
    100%{
      transform:scale(2,2);
      opacity:0.0;
    }
  }
</style>