# Animaciones de texto para redes: 4 estilos que funcionan [Canonical HTML page](https://gradiently.design/es/guide/text-animation-ideas) No necesitas cincuenta efectos. Cuatro entradas, bien elegidas y bien cronometradas, resuelven stories, Reels, anuncios y citas. Esta es la que toca usar en cada caso. ## The short version - 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 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 | Animación | Sensación | Úsala para | Duración de la entrada | | --- | --- | --- | --- | | Subida | Serena, segura, premium | Titulares, lanzamientos, citas, publicaciones editoriales | 400 a 700 ms | | Pop | Enérgica, juguetona, urgente | Precios, ofertas, ganchos de una palabra, cuentas atrás | 250 a 400 ms | | Barrido | Precisa, cinematográfica, reveladora | Titulares, revelaciones, antes y después | 500 a 800 ms | | Máquina de escribir | Personal, curiosa, en el momento | Preguntas, citas, consejos, entre bastidores | 30 a 60 ms por letra | Puntos de partida para cada estilo. Más lento parece más caro; más rápido parece más urgente. Si te pasas hacia cualquiera de los dos lados, la gente deja de leer. ## 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 social vertical que anuncia una colección de otoño, con una sobreetiqueta, un titular y una línea de detalle 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. Una story vertical de rebajas con las palabras Último día en tipografía grande y Termina a medianoche debajo 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 story vertical que pregunta Qué horneamos el viernes, con espacio debajo para una encuesta 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. > **Las cuentas de la máquina de escribir** A 40 ms por letra, una línea de 30 letras tarda 1,2 segundos en escribirse, más unos dos segundos de pausa. Una línea de quince palabras supera los tres segundos antes de que empiece la pausa, así que recorta palabras o reparte la línea entre fotogramas. ## 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](https://gradiently.design/es/guide/instagram-story-design). 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. ```css /* 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; } } ``` Ajusta el ancho y los steps de la máquina de escribir al número de caracteres de tu línea. En líneas con fuentes proporcionales, revela letra a letra con un pequeño script. Las curvas importan tanto como las duraciones; [easing](https://gradiently.design/es/guide/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](https://gradiently.design/es/guide/variable-font-animation). ## 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](https://gradiently.design/es/guide/animated-instagram-story) y [GIF frente a MP4](https://gradiently.design/es/guide/gif-vs-mp4) te ayudan a elegir el formato. ## FAQ ### ¿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.