La idea
No hay animación CSS aquí: es tiempo. Cada cierto rato mostramos una letra
más de la frase (cortándola con slice). Al completarla, esperamos un
momento y empezamos a borrar quitando letras. Al vaciarla, pasamos a la
siguiente frase. Y a repetir.
texto.textContent = frase.slice(0, i);
El bucle completo
Usamos setTimeout que se vuelve a llamar solo, y una variable borrando para saber si sumamos o restamos letras. La velocidad (90ms) es el slider.
let i = 0, borrando = false;
(function tick(){
texto.textContent = frase.slice(0, i);
if (!borrando && i < frase.length) i++;
else if (!borrando) { borrando = true; return esperar(); }
else if (i > 0) i--;
else { borrando = false; siguienteFrase(); }
setTimeout(tick, borrando ? 45 : 90);
})();
El cursor que parpadea
Ese | del final es puro CSS: un pseudo-elemento con una animación que le cambia la opacidad.
.texto::after{
content:'|';
animation:parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo{ 50%{ opacity:0; } }
Dónde luce ⌨️
En un hero (“Soy diseñador / developer / creativo”), en subtítulos rotativos o en terminales falsas. Da sensación de que la web te está “hablando”.