Me gustaría animar el texto del DOM letra por letra usando requestAnimationFrame(). Lo he logrado con setInterval() y también con requestAnimationFrame() también, pero aún no puedo lograr que se reproduzca durante un tiempo predefinido. Por ejemplo, en mi máquina, cada cuadro se reproduce durante 6 ms, pero me gustaría que todo el texto se reproduzca, por ejemplo, durante 5 s. Entonces, si tengo 100 símbolos, cada símbolo debe agregarse durante 50 ms y luego el otro. ¿Podría por favor recomendarme una solución? Aquí está mi código:

 const text = document.getElementById('text'); const textContent = text.innerText; text.innerHTML = ''; let i = 0; let totalTime = 2000; let start; function animateText(time) { if (start === undefined) { start = time; } if(text.innerHTML.length < textContent.length) { requestAnimationFrame(animateText); text.innerHTML += textContent[i]; i++; } } requestAnimationFrame(animateText);