私たちはよくテキストの中の文字を一つずつ表示して、タイプライターの効果をシミュレーションしたいです.ターミナルコマンドラインのような感じです.
JSで実現します
html数:

jsコード:

const $ = attr => document.querySelector(attr);
const textDom = $('.text');
const cursorDom = $('.cursor');
const input = (text) => {
  const textArr = text.split('');
  let index = 0;
  const timer = setInterval(() => {
    const showText = textArr.slice(0, index).join('');
    textDom.innerHTML = showText;
    index++;
    if (index > textArr.length) clearInterval(timer);
  }, 100);
  setInterval(() => {
    if (cursorDom.style.display === 'none') {
      cursorDom.style.display = 'inline';
    } else {
      cursorDom.style.display = 'none';
    }
  }, 500);
}
input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.');

CSS 3で実現:
JSの実現は人にあげる感じがまた臭いのがまた長いです.CSSで実現することができますか?html数:

The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.

@keyframes typing {
    from { width: 0 }
}

@keyframes caret {
    50% { border-right-color: transparent; }
}

h1 {
  font: bold 200% Consolas, Monaco, monospace;
  width: 108ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: .05em solid;
  animation: typing 10.8s steps(108),
            caret 1s steps(1) infinite;
}

文字列の長さは108です.
まとめ:
js実現は互換性を考慮せず、CSS 3で実現するためには互換性を考慮し、文字列の長さと幅を考慮して改行できません.
追加:
以前はある会社のホームページを見ていましたが、このタイピング動画の効果があります.今日はコードのハイライト効果があることが分かりました.コードを最適化しました.

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join('');
  textDom.innerHTML = showText;
  let current = text.substr(index, 1);
  if (current === '', index) + 1;
  }
  else {
    index++;
  }
  if (index > textArr.length) clearInterval(timer);
 }, 100);
//...
input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.');

効果はやはり違っています.入力が終わった時に、ハイライトが出るはずです.まず見てみます.実現したら、補充します.
追加を続ける:
無敵を祭るしかない正則がマッチしているようです.

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join('').replace(/\([\s\S]*)\/ig, '\$1\');
  textDom.innerHTML = showText;
  let current = text.substr(index, 1);
  if (current === '', index) + 1;
  }   
  else {
    index++;
  } 
  if (index > textArr.length) clearInterval(timer);
}, 100);
//...
input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.');

プレビューの効果:demoフルコード:

    
        
        
        
        
    
    
        >>>
        
        
        
The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.
        
            const $ = attr => document.querySelector(attr);
const textDom = $('.text');
            const cursorDom = $('.cursor');
            const input = (text) => {
            const textArr = text.split('');
            let index = 0;
            const timer = setInterval(() => {
                const showText = textArr.slice(0, index).join('').replace(/\<span\>([\s\S]*)\<\/span\>/ig, '\<span style="color: #415caa"\>$1\<\/span\>');
                textDom.innerHTML = showText;
                var current = text.substr(index, 1);
                if (current === '<') {
                    index = text.indexOf('>', index) + 1;
                }   
                else {
                    index++;
                } 
                if (index > textArr.length) clearInterval(timer);
            }, 100);
            setInterval(() => {
                if (cursorDom.style.display === 'none') {
                cursorDom.style.display = 'inline';
                } else {
                cursorDom.style.display = 'none';
                }
            }, 500);
            }
            input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is <span>the successor</span> of the ZGMF-X10A Freedom.');