タイプライター効果を実現する純粋な js

<h2 id="テキストボックス"></h2>
<!-- 1 行もコードです -->
CS

        h2 {
   幅: 800ピクセル;
   行の高さ: 40px;
   下境界線: 1px 実線;
   マージン: 200px 自動;
   フォントサイズ: 24px;
  }
  
  .アニメーション {
   表示: インラインブロック;
   パディング: 0 5px;
   垂直方向の配置: 3px;
   フォントサイズ: 20px;
   フォントの太さ: 標準;
  }
  
  .animate.on {
   アニメーション: 1.5 秒の無限前方フェード。
  }
  
  @keyframes フェード {
   から {
    不透明度: 0;
   }
   に {
    不透明度: 1;
   }
  }

textBox を $('#text-box') とします。
インデックスを 0 にします。
let str = '私のウェブサイトへようこそ！';
 
  len = str.length;とします。
 
  関数入力() {
 
   textBox.html(str.substr(0, index) + '<span class="animate">|</span>');
 
   setTimeout(関数() {
    インデックス++;
 
    if(インデックス === 長さ + 1) {
     $('.animate').addClass('on');
     戻る;
    }
 
    入力（）;
 
   }, Math.random() * 600)
 
   コンソールログ(インデックス);
  }
 
  入力（）;