Cómo animar texto: 6 técnicas (y la vía rápida con IA)

¿Por qué animar el texto?

El texto estático se queda ahí; el texto animado dirige la mirada, marca el ritmo y hace que una sola línea parezca diseñada. Un subtítulo que se escribe en pantalla, un titular que entra con un barrido, un eslogan que aparece palabra por palabra: el movimiento convierte las palabras en algo que la gente mira en lugar de ojear. La buena noticia: no necesitas After Effects ni hacer keyframes a mano para lograrlo. A continuación tienes las seis técnicas de revelado a las que recurren los profesionales, el timing que las hace sentir premium y la forma más rápida de producirlas con IA.

El reel de arriba recorre las seis técnicas una tras otra. Aquí tienes cada una: cuándo usarla y cómo funciona.

Las 6 técnicas básicas de animación de texto

1. Revelado con máscara (deslizamiento hacia arriba)

La entrada de titular estándar del sector: envuelve cada línea en una caja que oculta el desbordamiento y luego desliza el texto hacia arriba desde una línea base oculta. Es limpio, ligero para la GPU y se lee como "premium" al instante. Escalona las líneas con 60–100ms de diferencia para que caigan en cascada en lugar de aparecer todas a la vez. Ideal para titulares y títulos de varias líneas.

2. Enfoque progresivo (blur-in)

Pasa la opacidad de 0 a 1 mientras animas el desenfoque desde unos 12px hasta 0. El texto "enfoca" en su sitio como un cambio de foco de cámara: suave y de gama alta. Mantén el radio del desenfoque moderado y la duración corta para que no se sienta lento. Ideal para líneas únicas elegantes y bloqueos de logotipo.

3. Barrido con clip-path

Revela el texto con un barrido direccional —una máscara de recorte que entra desde un lado— sin mover los propios glifos. Nítido y editorial. Combínalo con un subrayado o una barra de color que viaje a la misma velocidad para conseguir un toque diseñado. Ideal para rótulos inferiores y títulos de sección.

4. Escalonado por caracteres

Divide la cadena en caracteres y haz que cada uno aparezca y suba con un desfase de 20–40ms. La opción más cinética y desenfadada: resérvala para cadenas cortas como una sola palabra o un eslogan, porque un texto largo animado carácter por carácter se lee como recargado. Nota de accesibilidad: dividir por caracteres rompe los lectores de pantalla, así que mantén siempre la cadena completa en un aria-label en el contenedor.

5. Tipografía cinética

La tipografía cinética es texto coreografiado a un ritmo: las palabras entran con fuerza, escalan y cortan en los énfasis, a menudo sincronizadas con una voz en off o una pista de música. Es la técnica detrás de los vídeos de letras y los eslóganes de producto contundentes. Constrúyela secuenciando los "golpes" de palabra (haz un pop de escala en cada palabra clave) y aterrizando en una línea de cierre más tranquila. Puedes generar una a partir de un prompt con nuestro generador de tipografía cinética.

6. Animación de peso con fuente variable

Anima el peso de una fuente variable (o su anchura e inclinación) en lugar de su posición: las letras se engrosan, adelgazan o estiran en su sitio. Un acento sutil y moderno que funciona bien sobre una única palabra enfatizada. Anima font-variation-settings en lugar de font-weight para que el valor interpole con suavidad, y confirma primero que tu fuente sea realmente una fuente variable, o el valor se limitará en silencio.

El timing que hace que el texto parezca profesional

La técnica importa menos que el ritmo. Tres reglas se encargan de la mayor parte:

• Entra con una curva de aceleración suave (ease-out). cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo) —inicio rápido, aterrizaje suave— se lee como premium. Evita el lineal; se siente robótico.
• Escalona según la granularidad. Líneas con 60–100ms de diferencia, palabras con 40–70ms, caracteres con 20–40ms. Ese desfase es lo que hace que un revelado caiga en cascada en vez de soltarse de golpe.
• Limita el revelado total cerca de los 800ms, con cada fragmento corriendo de 400–600ms. Si una cadena larga tarda demasiado, pasa de caracteres a palabras o líneas.

Fija primero tu tipografía estática: ajusta el tracking en los titulares de display (alrededor de -0.02em) y establece el interlineado en 1.1–1.2. El movimiento no puede rescatar una mala tipografía.

La vía rápida: animar texto con IA

Programar cada revelado a mano funciona, pero el camino más rápido es describir lo que quieres y dejar que la IA construya la animación. Así es el flujo en iArt.ai:

Paso 1: Describe el texto y el movimiento

Escribe tu línea y la sensación que buscas: "el titular barre hacia arriba palabra por palabra, limpio y premium", o "tipografía cinética, cada palabra entra con fuerza al ritmo". Menciona la duración, el color de fondo y el ambiente de la fuente.

Paso 2: La IA genera la animación

La IA construye una animación real de motion graphics: divide tu texto, escribe el movimiento escalonado de cada fragmento y le aplica la aceleración correcta, y luego lo renderiza a vídeo. Sin línea de tiempo, sin plugins.

Paso 3: Refina con un prompt

¿No queda del todo bien? Di qué cambiar: "más lento", "escalona por letra", "añade un blur-in", "haz que la última palabra sea del color de acento". La IA ajusta sin empezar de cero.

Paso 4: Exporta como MP4

Elige una resolución y exporta como MP4, listo para tu edición de vídeo, tu publicación en redes, la portada de tu web o una secuencia de títulos.

Consejos para una mejor animación de texto

• Un revelado por momento. No hagas blur-in, escalonado y barrido en la misma línea: elige un único motor. Los revelados combinados se leen como ruido.
• Ajusta el movimiento al mensaje. Una línea de marca tranquila pide una máscara o un blur; un gancho enérgico pide escalonado por caracteres o golpes cinéticos.
• Mantén el tiempo suficiente para leer. Deja un compás tras terminar el revelado antes de cortar: aproximadamente 0.3 segundos por palabra, con un mínimo de alrededor de 1 segundo.
• Cuida el área segura. Mantén el texto dentro del 90% central del cuadro para que los subtítulos y la interfaz de las plataformas no lo recorten.
• Respeta el movimiento reducido. En la web, respeta prefers-reduced-motion mostrando el texto final sin la animación.

FAQ

¿Cuál es la forma más fácil de animar texto?

Descríbeselo a una herramienta de IA y exporta el resultado. Con iArt escribes la línea y el movimiento que quieres ("barre hacia arriba palabra por palabra"), la IA genera una animación editable y exportas un MP4: sin After Effects y sin keyframes.

¿Cómo animo texto sin After Effects?

Hay tres caminos: CSS o GSAP si programas para la web, una herramienta de plantillas para presets, o un generador de IA como iArt que construye una animación a medida a partir de un prompt de texto. La vía de la IA es la más rápida para títulos puntuales y clips para redes. Consulta nuestra alternativa a After Effects.

¿Qué es la tipografía cinética?

La tipografía cinética es texto animado coreografiado para el énfasis y el ritmo: las palabras escalan, golpean y cortan, a menudo sincronizadas con el audio. Es el estilo detrás de los vídeos de letras y los eslóganes contundentes. Definición completa en nuestra entrada del glosario sobre tipografía cinética.

¿Cuánto debe durar una animación de texto?

El revelado en sí debería aterrizar en menos de unos 800ms. Luego mantén el texto el tiempo suficiente para leerlo —aproximadamente 0.3 segundos por palabra, con un mínimo de 1 segundo— antes de cortar o seguir.

¿Puedo usar texto animado comercialmente y cuánto cuesta?

Sí: todo lo que crees en iArt es tuyo para usarlo comercialmente. Empezar es gratis: cada cuenta nueva recibe $5 en créditos al registrarse, sin necesidad de tarjeta, y una sola animación de texto cuesta una fracción de un crédito. Consulta los precios para ver los detalles de los planes.