Animaciones de texto

El texto animado es perfecto para titulares de héroes, eslóganes y cifras de impacto. La clave es usarlo con moderación: un solo titular animado llama la atención; diez, cansan.

Concepto: animar texto sin romper la accesibilidad

Hay tres técnicas principales:

1. Animar el contenedor completo (degradados, glitch): CSS puro, sin tocar el HTML.
2. Dividir el texto en letras (<span> por letra) para animarlas una a una. Requiere JS o escribir los spans a mano.
3. Cambiar el contenido con JS (máquina de escribir, contador).

Accesibilidad al dividir texto

Si conviertes "Hola" en <span>H</span><span>o</span>…, algunos lectores de pantalla leen letra por letra. Solución: pon el texto completo en aria-label del contenedor y aria-hidden="true" en cada span (el demo de revelado lo hace así).

Otra propiedad clave de esta sección es background-clip: text: recorta el fondo a la forma de las letras, permitiendo degradados e incluso animaciones dentro del texto.

Máquina de escribir

Dos versiones: CSS puro (una frase, con steps()) y JavaScript (varias frases que se escriben y se borran).

Máquina de escribir CSS y JS

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Versión CSS: la función de tiempo steps(n) divide la animación en saltos en lugar de hacerla continua. Con una fuente monoespaciada y la unidad ch (ancho de un carácter), cada salto revela exactamente una letra:

.typing-css {
  font-family: monospace;
  width: 23ch;                 /* número de caracteres */
  white-space: nowrap; overflow: hidden;
  border-right: 3px solid;     /* el cursor */
  animation: escribir 2.5s steps(23) both, parpadeo .75s step-end infinite;
}
@keyframes escribir { from { width: 0; } }

Versión JS: un setTimeout recursivo añade o quita una letra cada vez, con pausas al terminar cada frase. Usamos Array.from(frase) para que los emojis no se partan a la mitad.

Texto con degradado animado

Degradado que fluye, brillo metálico que cruza y texto con contorno que se rellena al pasar el mouse.

Degradado, brillo y contorno

✏️ Editar en el Playground↗ Abrir en pestaña nueva

.degradado {
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #8b5cf6, #22d3ee, #f43f5e);
  background-size: 300% 100%;            /* fondo más ancho que el texto */
  -webkit-background-clip: text; background-clip: text;
  color: transparent;                    /* deja ver el fondo */
  animation: fluir 6s linear infinite;
}
@keyframes fluir { to { background-position: 300% 0; } }

Repite el primer color al final

Si el degradado empieza y termina con el mismo color, el bucle es continuo y no se nota el "salto" al reiniciar.

Efecto glitch

El efecto de "señal dañada" típico de sitios gamer, cyberpunk o de música electrónica.

Texto glitch

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo funciona: ::before y ::after copian el texto con content: attr(data-texto). Cada copia tiene una sombra de color (magenta / cian) y un clip-path: inset() que muestra sólo una franja horizontal distinta en cada paso de la animación. El resultado: trozos del texto parecen desplazarse al azar.

Úsalo con cuidado

Los efectos que parpadean rápido pueden ser molestos y, en casos extremos, provocar crisis en personas con epilepsia fotosensible. Evita más de 3 destellos por segundo y respeta siempre prefers-reduced-motion (el demo muestra una versión estática).

Revelado letra por letra y texto ondulado

Letra por letra y texto ondulado

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Un pequeño script divide el texto en spans y asigna a cada uno su índice en --i. Después, todo es CSS:

.letras span { display: inline-block; white-space: pre; }   /* inline-block para poder usar transform */
.revelar span {
  animation: revelar .6s ease-out both;
  animation-delay: calc(var(--i) * 45ms);
}
.ola span {
  animation: ola 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 80ms);
}

white-space: pre evita que los spans que contienen un espacio colapsen y "desaparezcan".

Contador numérico animado

Las cifras que suben desde cero ("1,250+ clientes") son un clásico de las landing pages.

Contador con requestAnimationFrame

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Puntos clave del código:

• requestAnimationFrame ejecuta una función justo antes de cada repintado (~60 veces por segundo). Es la forma correcta de animar con JS: más fluido y eficiente que setInterval.
• Una función de easing (1 - (1 - t)³) hace que el número suba rápido y frene al final.
• Intl.NumberFormat('es-MX') añade los separadores de miles.
• IntersectionObserver inicia el conteo sólo cuando el número entra en pantalla.
• font-variant-numeric: tabular-nums hace que todos los dígitos midan lo mismo y el texto no "tiemble".

Ejercicios

1. Cambia las frases de la máquina de escribir por los servicios de un cliente ficticio.
2. Haz que el texto ondulado cambie de color en cada letra usando hsl(calc(var(--i) * 25) 80% 60%).
3. Añade un contador con decimales (por ejemplo, "4.9 ★").

Ver solución del ejercicio 3

// En contar(), usa toFixed en lugar de Math.round cuando haya decimales
const decimales = Number(el.dataset.decimales || 0);
const valor = (hasta * suavizar(t)).toFixed(decimales);
el.textContent = pre + valor + suf;

<span class="numero" data-hasta="4.9" data-decimales="1" data-sufijo=" ★">0</span>

Resumen

• background-clip: text + color: transparent = degradados (y animaciones) dentro del texto.
• steps(n) crea animaciones a saltos: perfecto para la máquina de escribir.
• Dividir en letras: spans con --i, display: inline-block y aria-label en el contenedor.
• Para animar números con JS usa requestAnimationFrame y una función de easing.