La versión corta
- Subida, pop, barrido y máquina de escribir son cuatro estilos de animación de texto que cubren la mayoría de las publicaciones en redes sociales.
- La subida va bien con mensajes serenos, premium y editoriales; el pop, con palabras cortas y enérgicas como precios y ofertas.
- El barrido descubre una línea como un telón y funciona para titulares y revelaciones de antes y después; la máquina de escribir va bien con citas, preguntas y todo lo que deba sentirse escrito en el momento.
- La mayoría de las animaciones de entrada se leen mejor entre un cuarto y tres cuartos de segundo, seguidas de una pausa lo bastante larga para leer la línea dos veces.
- Usa un único estilo de animación en una publicación o serie, y escalona las líneas en lugar de animar cada palabra de forma distinta.
En esta página
En las publicaciones sociales, cuatro estilos de animación de texto hacen casi todo: la subida (las palabras ascienden y aparecen con un fundido, serena y premium), el pop (las palabras entran con un pequeño rebote, corto y potente), el barrido (una línea se descubre desde un lado, como un telón) y la máquina de escribir (las letras aparecen una a una, como si se escribieran ahora). Adapta el estilo al mensaje, mantén cada entrada por debajo de unos tres cuartos de segundo y deja después las palabras quietas el tiempo suficiente para leerlas dos veces. Usa un estilo por publicación. Eso es gran parte del oficio.
Las cuatro animaciones de texto de un vistazo
Úsala para
Duración de la entrada
Úsala para
Duración de la entrada
Úsala para
Duración de la entrada
Sensación
Úsala para
Duración de la entrada
Subida: la opción segura y premium
La subida mueve cada línea una corta distancia hacia arriba mientras aparece con un fundido, y luego la deja asentarse. Como el movimiento es pequeño y frena, el ojo lee las palabras casi en cuanto empiezan a aparecer. Es la opción por defecto adecuada para las marcas que quieren transmitir calma: hoteles, estudios, cosmética, arquitectura, consultoras.
Una publicación de lanzamiento que va con la subida: primero la sobreetiqueta, luego el titular y luego el detalle, cada uno un tiempo después del anterior.
Escalona las líneas unos 100 a 150 milisegundos para que caigan en cascada. Escalona palabras solo en líneas muy cortas; escalonar letras con la subida queda recargado.
Pop: para palabras cortas que deben aterrizar
El pop agranda una palabra desde un tamaño algo menor, se pasa un poco y se asienta. Tiene energía, así que va bien con palabras que quieres que golpeen: un precio, un porcentaje, «Agotado», «Esta noche», «Último día». Falla en frases largas, que tiemblan en lugar de aterrizar.
Dos palabras que saltan: cortas, urgentes, se leen en un instante.
Barrido: descubre un titular como un telón
El barrido descubre una línea de un borde al otro, de modo que las palabras aparecen en orden de lectura sin moverse. Se siente deliberado y cinematográfico, y como las propias letras no se desplazan, es una de las entradas más legibles. Úsalo en titulares, para una línea de «antes» que se barre y revela un «después», o para un nombre que se descubre al final de un vídeo.
Barre en el sentido de lectura: de izquierda a derecha en español y en la mayoría de los idiomas europeos. Un barrido contra el sentido de lectura da la sensación de que el texto se lo llevan.
Máquina de escribir: palabras escritas en el momento
La máquina de escribir revela las letras de una en una. Es más lenta que las otras tres, y ese es su sentido: hace que una línea se sienta personal, como si alguien te escribiera ahora. Úsala para preguntas, citas cortas, consejos y notas entre bastidores. Mantén la línea corta, porque la frase entera debe terminar de teclearse antes de que se pueda leer, y aun así necesita una pausa.
Una pregunta va bien con la máquina de escribir: parece tecleada por una persona, en directo, para ti. Lo bastante corta para terminar de escribirse en un segundo.
Cómo elegir la animación de texto adecuada
- 1
Parte del mensaje
Las noticias serenas suben. Las noticias urgentes saltan. Una revelación barre. Una nota personal se teclea.
- 2
Cuenta las palabras
De una a tres palabras admiten cualquier estilo. Las líneas largas funcionan mejor con subida o barrido; evita el pop y la máquina de escribir.
- 3
Elige un estilo por publicación
Mezclar entradas en un mismo fotograma parece una plantilla presumiendo. La coherencia es lo que hace que el movimiento se sienta de marca.
- 4
Fija la pausa
Cuando se asienta la última palabra, mantén el fotograma el tiempo suficiente para leerlo dos veces. Las stories avanzan solas, así que esto importa más en las stories de Instagram.
- 5
Míralo en silencio en un móvil
Así lo verán muchos de tus espectadores. Si alguna línea cuesta de captar, ralentízala o recorta palabras.
Evita
- Cada línea con una animación distinta
- Letras que giran, se voltean o rebotan sin parar
- Texto que sigue moviéndose cuando avanza la story
- Pop en una frase entera
- Texto animado sobre un vídeo recargado y rápido
Haz
- Un estilo para toda la publicación o serie
- Una entrada y luego quietud
- Una pausa clara antes del siguiente fotograma
- Pop en una a tres palabras
- Un fondo sereno y de movimiento lento bajo las palabras
Animaciones de texto en CSS que puedes copiar
En un sitio web, los mismos cuatro estilos necesitan unas pocas líneas de CSS cada uno. Mantenlos breves, ejecútalos una vez y desactívalos para quienes prefieren movimiento reducido.
/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }
.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }
.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.typewriter {
font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
white-space: nowrap; overflow: hidden; width: 24ch;
animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }
@media (prefers-reduced-motion: reduce) {
.rise, .pop, .wipe, .typewriter { animation: none; }
}Las curvas importan tanto como las duraciones; easing explica por qué la subida debe frenar y el pop debe pasarse un poco. Para el oficio más amplio del texto en movimiento, consulta la tipografía cinética.
Animar texto en Gradiently
El Studio de Gradiently incluye estas cuatro animaciones de texto, subida, pop, barrido y máquina de escribir, para cualquier capa de texto, sobre un Mark que puede moverse despacio detrás de las palabras. El Mark mantiene su zona más tranquila bajo el texto mientras se mueve, así que las líneas siguen legibles durante toda la animación. Con Pro, exportas stories y Reels como GIF, o como MP4 o WebM donde el navegador admita grabación. Stories animadas de Instagram y GIF frente a MP4 te ayudan a elegir el formato.
Preguntas frecuentes
¿Cuál es la mejor animación de texto para stories de Instagram?
La subida es la opción más segura para la mayoría de las stories. Usa el pop para palabras cortas y urgentes, el barrido para revelaciones y la máquina de escribir para preguntas o notas personales.
¿Cuánto debe durar una animación de texto?
La mayoría de las entradas se leen bien entre unos 250 y 800 milisegundos, seguidas de una pausa lo bastante larga para leer la línea dos veces.
¿Cómo hago un efecto de texto de máquina de escribir?
Revela un carácter cada vez, a unos 30 a 60 milisegundos por letra. En CSS, anima el ancho de una línea monoespaciada con steps() igual a su número de caracteres.
¿Debo usar animaciones de texto distintas en una misma publicación?
Normalmente no. Un solo estilo en una publicación, o en toda una serie, se ve deliberado y de marca; mezclar estilos resulta recargado.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil