---

版本一(requestAnimationFrame)

前言

window.requestAnimationFrame()告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行。
備注：若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動(dòng)畫，那么回調(diào)函數(shù)自身必須再次調(diào)用requestAnimationFrame()。requestAnimationFrame()是一次性的。
當(dāng)你準(zhǔn)備更新在屏動(dòng)畫時(shí)你應(yīng)該調(diào)用此方法。這將使瀏覽器在下一次重繪之前調(diào)用你傳入給該方法的動(dòng)畫函數(shù)(即你的回調(diào)函數(shù))。回調(diào)函數(shù)執(zhí)行次數(shù)通常是每秒60次，但在大多數(shù)遵循W3C建議的瀏覽器中，回調(diào)函數(shù)執(zhí)行次數(shù)通常與瀏覽器屏幕刷新次數(shù)相匹配。為了提高性能和電池壽命，在大多數(shù)瀏覽器里，當(dāng)requestAnimationFrame()運(yùn)行在后臺(tái)標(biāo)簽頁(yè)或者隱藏的<iframe>里時(shí)，requestAnimationFrame()會(huì)被暫停調(diào)用以提升性能和電池壽命。
DOMHighResTimeStamp參數(shù)會(huì)傳入回調(diào)方法中，它指示當(dāng)前被requestAnimationFrame()排序的回調(diào)函數(shù)被觸發(fā)的時(shí)間。在同一個(gè)幀中的多個(gè)回調(diào)函數(shù)，它們每一個(gè)都會(huì)接受到一個(gè)相同的時(shí)間戳，即使在計(jì)算上一個(gè)回調(diào)函數(shù)的工作負(fù)載期間已經(jīng)消耗了一些時(shí)間。該時(shí)間戳是一個(gè)十進(jìn)制數(shù)，單位為毫秒，最小精度為1ms(1000μs)。
警告：請(qǐng)確保總是使用第一個(gè)參數(shù)(或其他一些獲取當(dāng)前時(shí)間的方法)來(lái)計(jì)算動(dòng)畫在一幀中的進(jìn)度，否則動(dòng)畫在高刷新率的屏幕中會(huì)運(yùn)行得更快。請(qǐng)參考下面示例的做法。
requestAnimationFrame(callback);

---

html

<div id="idBoxRAF">不要去強(qiáng)留任何一段關(guān)系 即使你很在意 惜我者 我惜之 嫌我者 我棄之 時(shí)間識(shí)人 落難之心 不經(jīng)一事 不懂于人 水不試不知深淺 人不交不知好壞 時(shí)間是個(gè)好東西 驗(yàn)證了人心 見證了人性 不要總擔(dān)心身邊會(huì)失去誰(shuí) 記得問問自己誰(shuí)又害怕失去你
</div>

---

JavaScript

function initRAF() {let textEl = document.querySelector("#idBoxRAF"),str = textEl.textContent,i = 0;textEl.textContent = '';function initR() {if (i >= str.length) return false;textEl.textContent += str[i];requestAnimationFrame(initR);i++;}initR();
}initRAF();

---

版本二(setTimeout)

<div id="idBox"><p>三百六十行，行行干破防。</p><p>吃得苦中苦，老板開路虎。</p><p>不聽老人言，開心好幾年。</p><p>明知山有虎，猛敲退堂鼓。</p><p>行而上學(xué)，不行退學(xué)。</p><p>安得廣夏千萬(wàn)間，廣廈一千萬(wàn)一間。</p><p>閻王叫我三更死，二更我就抹脖子。</p><p>一寸光陰一寸金，三寸光陰一個(gè)鑫。</p><p>風(fēng)雪壓我兩三年，兩眼一閉就長(zhǎng)眠。</p><p>輕舟已過萬(wàn)重山，烏蒙山連著山外山。</p><p>失敗是成功之母，可惜成功六親不認(rèn)。</p>
</div>

---

JavaScript

function init(timeout = 28) {let textEl = document.querySelector("#idBox"),pEl = textEl.querySelectorAll("p"),timeStrat = 0;textEl.textContent = "";pEl.forEach((pT, j) => {let str = pT.textContent,newP = document.createElement('p');textEl.appendChild(newP);for (let i = 0; i < str.length; i++) {setTimeout(() => newP.textContent += str[i], timeStrat);timeStrat += timeout;}});
}init(30);

---

版本三(css)

html

<div class="container"><p>你只是來(lái)體驗(yàn)生命 什么都擁有不了 什么都留不住 不需要證明什么 更沒有什么事一定要實(shí)現(xiàn) 你能做的就是不斷嘗試 收獲 感受 然后放下 我們來(lái)到這世間 只是為了看花怎么開 水怎么流 太陽(yáng)如何升起 夕陽(yáng)何時(shí)落下經(jīng)歷有趣的事情 遇見難忘的人 生活原本就很沉悶 但跑起來(lái)就有風(fēng)了</p><p class="eraser"><span class="text">你只是來(lái)體驗(yàn)生命 什么都擁有不了 什么都留不住 不需要證明什么 更沒有什么事一定要實(shí)現(xiàn) 你能做的就是不斷嘗試 收獲 感受 然后放下 我們來(lái)到這世間 只是為了看花怎么開 水怎么流 太陽(yáng)如何升起 夕陽(yáng)何時(shí)落下經(jīng)歷有趣的事情 遇見難忘的人 生活原本就很沉悶 但跑起來(lái)就有風(fēng)了</span></p>
</div>

---

style

* {margin: 0;padding: 0;box-sizing: border-box;
}body {background: #000;color: #fff;
}.container {width: 80%;margin: 1em auto;line-height: 2;text-indent: 2em;position: relative;
}.eraser {position: absolute;inset: 0;
}.text {background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) + 30px));color: transparent;animation: erase 10s linear forwards;
}@property --p {syntax: '<percentage>';initial-value: 0%;inherits: false;
}@keyframes erase {to {--p: 100%;}
}