¡Tu texto puede ser mucho más genial que solo palabras en la pantalla! He recopilado 28 animaciones CSS que convertirán letras comunes en la característica principal de tu sitio web.
En este material analizaremos 28 ejemplos, estudiaremos las tecnologías y los principios de CSS.
#1. Explosión de letras al pasar el cursor
Al pasar el cursor sobre un elemento de texto, se inicia una impresionante transformación dinámica. Las palabras aumentarán suavemente y dos anillos brillantes se dispersarán a su alrededor. Se expandirán, creando un efecto de explosión, disolviéndose gradualmente en el espacio. Este dinámico efecto visual atraerá la atención y agregará interactividad a tu texto.
La animación se basa en las siguientes funciones y definiciones de CSS:
::beforey::after: la animación se adjunta a estos elementosradial-gradient: se aplica a los pseudoelementos para imitar el efecto de una salpicadura colorida.@keyframes burst: anima los pseudoelementos para crear el efecto de explosión.
Puedes ver un ejemplo de implementación aquí:
See the Pen Explosión_letras_pasar_cursor_CSS by Alex (@htmldesdecero) on CodePen.
#2. Sombra danzante
La animación interactiva le da al texto una sombra viva que realiza un baile gracioso alrededor de las letras. Los movimientos diagonales de las sombras, que cambian de color, crean la ilusión de un movimiento volumétrico. El efecto se basa en el cambio dinámico de los parámetros de la sombra, que fluyen suavemente de un estado a otro.
text-shadow: para crear capas de sombra de color alrededor del texto@keyframes shadow-dance: anima la propiedad text-shadow para el desplazamiento dinámico de las sombras.
Puedes ver un ejemplo de implementación aquí:
See the Pen Sombra_danzante_CSS by Alex (@htmldesdecero) on CodePen.
#3. Texto derretido
El efecto visual transforma el texto estático en una sustancia fluida, creando la ilusión de letras derretidas que caen por la página. Este efecto fascinante se logra mediante una combinación de una imagen de fondo con un patrón líquido animado y la transparencia del texto, lo que crea la impresión de una disolución suave de las letras en un medio fluido.
::before: agrega una capa semitransparente para imitar la etapa inicial::after: pseudoelemento: agrega una versión borrosa y descolorida@keyframes melt: anima el texto principal, balanceándose suavemente hacia arriba y hacia abajo, imitando los movimientos descendentes@keyframes drip: anima los pseudoelementos, estirándolos y creando un efecto de gotas
Puedes ver un ejemplo de implementación aquí:
See the Pen Texto_derretido_CSS by Alex (@htmldesdecero) on CodePen.
#4. Matrix
El efecto recrea la icónica presentación visual del mundo de «Matrix», donde los símbolos de la katakana japonesa en forma de lluvia verde caen por la pantalla, imitando la realidad digital. La animación se basa en el movimiento multicapa de los elementos de texto, que se transforman y mueven suavemente, creando una sensación de inmersión en el espacio virtual.
text-shadow: crea un efecto de brillo alrededor del textoclip-path: se utiliza para recortar partes del texto ::beforerepeating-linear-gradient: crea un fondo similar a la lluvia@keyframes rain: maneja el movimiento vertical del fondo@keyframes glitch: anima el efecto del texto.
Puedes ver un ejemplo de implementación aquí:
See the Pen Matrix_CSS by Alex (@htmldesdecero) on CodePen.
#5. Máscara de texto
La máscara crea un brillo mágico del texto, a través del cual se transparenta un fondo animado.
color: transparent: hace que el texto en sí sea invisible, solo se muestra la imagen de fondo.background-clip: text: recorta la imagen de fondo según la forma del texto.
Puedes ver un ejemplo de implementación aquí:
See the Pen Máscara_texto_CSS by Alex (@htmldesdecero) on CodePen.
#6. Giro 3D
El texto volumétrico parece flotar en el espacio, girando lentamente y proyectando una sombra.
text-shadow: para darle al texto un aspecto tridimensional, se utilizan múltiples sombras de texto.transform: rotate(0deg): establece el ángulo de rotación inicial alrededor del eje Y
Puedes ver un ejemplo de implementación aquí:
See the Pen Girar_3D_CSS by Alex (@htmldesdecero) on CodePen.
#7. Efecto Glitch
Un torbellino digital rompe el texto en fragmentos, creando interferencias y distorsiones realistas.
::beforey::after. Creación de duplicados de capas de texto.clip-path: polygonse aplica a estos pseudoelementos para enmascarar ciertas partes del texto.transform: translate: desplaza ligeramente el texto en diferentes direcciones, creando un efecto de distorsión.
Puedes ver un ejemplo de implementación aquí:
See the Pen Efecto_Glitch_CSS by Alex (@htmldesdecero) on CodePen.
#8. Brillo neón
El texto pulsa al ritmo de las luces de neón, alternando entre blanco y fucsia.
text-shadow: crea un efecto de brillo mediante varias capas de desenfoque que aumentan gradualmente.@keyframes glow: anima las sombras del texto al cambiar los colores
Puedes ver un ejemplo de implementación aquí:
See the Pen BRILLO_NEÓN_CSS by Alex (@htmldesdecero) on CodePen.
#9. Texto ondulado
La fascinante animación convierte el texto en una superficie marina, donde cada letra se balancea suavemente sobre las olas, creando un efecto realista de las olas y brillando a la luz del sol virtual.
@keyframes wave: aplica una animación continua en forma de onda a cada letraanimation-delay: a cada letra se le aplica un retraso de 0.2 segundos, por lo que su animación comienza un poco más tarde que la anterior.
Puedes ver un ejemplo de implementación aquí:
See the Pen Texto_ondulado_CSS by Alex (@htmldesdecero) on CodePen.
#10. Texto dividido
Las dos mitades de la palabra convergen rápidamente en el centro, creando un efecto de unión perfecta de las partes CON y JUNTO.
transform: translateX: inicialmente coloca ambas partes del texto fuera de la pantalla@keyframes slide-in-left: mueve el texto izquierdo desde el borde izquierdo a la posición central@keyframes slide-in-right: mueve el texto derecho desde el borde derecho a la posición centralanimation-fill-mode: forwards: garantiza que el texto permanezca en su lugar después de que finalice la animación
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
#11. Texto 3D brillante
El texto volumétrico flota en el espacio digital, emitiendo un brillo brillante y girando lentamente en tres dimensiones.
@keyframes mobble: define los movimientos de rotación 3D@keyframes glow: define las transiciones de color del brillotext-shadow: crean un efecto de brillo alrededor del texto, aplicando una sombra que cambia de color durante la animación del brillotranslateZ: coloca cada capa de texto a diferentes profundidades para crear un efecto de superposición 3D
Puedes ver un ejemplo de implementación aquí:
See the Pen Texto_3D_brillante_CSS by Alex (@htmldesdecero) on CodePen.
#12. Animación 3D
El texto HEY cobra vida en el espacio tridimensional, llenándose de energía de tonos vibrantes y sombras vivas que crean un ritmo similar a los latidos del corazón.
- Sombras de texto
- Transformaciones CSS
- Flexbox CSS
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
13. Efecto de marquesina de texto 3D
El efecto de marquesina de texto 3D de Comehope es una pseudoanimación 3D que crea una ilusión óptica de movimiento del texto a través del ángulo de una caja volumétrica. Este efecto se logra combinando transformaciones de perspectiva, recorte inteligente y animación de la barra de desplazamiento.
- Perspectiva y transformaciones 3D
transform-origin: asegura la rotación desde el lado correcto@keyframes marquee: define el movimiento suave del texto a lo largo de los paneles.
Puedes ver un ejemplo de implementación aquí:
See the Pen Efecto_marquesina_texto_3D_CSS by Alex (@htmldesdecero) on CodePen.
#14. Fuente de color Nabla
La innovadora fuente de color Nabla de Scott Kellom convierte el texto común en un espectáculo 3D emocionante. Cada letra de la palabra COLOR FONTS! cobra vida a su propio ritmo: las letras pulsan con diferente intensidad, creando un impresionante efecto volumétrico. El orden de ajedrez de la animación y las pausas temporales bien pensadas forman un efecto en cascada fascinante que literalmente da vida al texto.
font-variation-settings: ajusta la profundidad del resaltado de la fuente Nabla para cambiar dinámicamente la profundidad 3D@font-palette-values: aplica una paleta de colores específica a la fuente variable para ajustar su apariencia
Puedes ver un ejemplo de implementación aquí:
See the Pen Fuente_color_Nabla_CSS by Alex (@htmldesdecero) on CodePen.
#15. Rotación 3D
La animación 3D muestra el texto EAT SLEEP RAVE, girándolo alrededor del eje X y formando una estructura cilíndrica. Los elementos clave de CSS utilizados en esta animación son:
transform-style: preserve-3d: garantiza que los elementos secundarios mantengan su posicionamiento tridimensional@keyframes animate: rota todo el contenedor alrededor del EJE X para crear un efecto de rotación continuatransform: perspective: crea la ilusión de profundidad y aleja el objeto del espectador. Esto hace que la escena 3D sea más realista
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
#16. Animaciones de texto deslizante
La animación de texto con fondo de Yemon es una versión mejorada de la inserción clásica de texto. La peculiaridad de esta solución radica en el cambio dinámico del fondo con cada cambio de texto, lo que crea un efecto visual impresionante y atrae eficazmente la atención de los visitantes al contenido.
roll: crea el efecto de aparición y desaparición del textobg: cambia cíclicamente diferentes colores de fondo
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
#17. Un letrero pegajoso
Un letrero pegajoso de Amit Sheen crea un efecto fascinante de letrero pegajoso, donde el texto fluye suavemente de un lado de una pared brillante y se integra orgánicamente en el otro. Esta impresionante animación, como sacada de una película de fantasmas, está magistralmente realizada con filtros CSS que crean un efecto borroso y fotogramas clave @keyframes que proporcionan un movimiento horizontal continuo del texto.
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
#18. Fantasmas y demonios
Fantasmas y demonios de Sicontis es una animación única en forma de icono de fantasma. A diferencia de las animaciones de texto clásicas, donde el texto se mueve horizontalmente, aquí el énfasis principal se pone en la imagen estilizada de un fantasma, lo que le da al efecto una atmósfera y expresividad especiales.
@keyframes ghostMove: mueve el icono por la pantallamix-blend-mode: exclusion: crea un efecto de color dinámico cuando el fantasma pasa a través del texto
Puedes ver un ejemplo de implementación aquí:
See the Pen Fantasmas_demonios_CSS by Alex (@htmldesdecero) on CodePen.
#19. Animación del título de Schitts Creek
En la animación del título de Schitt’s Creek de Rob, se combinan elegantemente dos grupos de texto: el nombre principal Schitt Creek y el superíndice s. La efectiva animación deslizante termina con un elegante parpadeo del elemento superíndice, creando un acento visual memorable.
pop-word: hace que la palabra gire y se haga visibleshow: hace que la palabra aparezca gradualmente de una opacidad de 0 a 1bar-scale: aparece la línea inferior ssparkle: escala y mueve el efecto brillante alrededor de la letra superíndiceshimmer: agrega un efecto de brillo de sombra de texto al superíndice
Puedes ver un ejemplo de implementación aquí:
See the Pen Schitts_Creek_CSS by Alex (@htmldesdecero) on CodePen.
#20. Rotación del borde del marco de texto
La animación de rotación del texto de Fernando Cohen crea un efecto impresionante: las letras giran alrededor del marco de la imagen, en lugar de simplemente deslizarse. Al pasar el cursor, ocurre la magia de CSS. El efecto se logra mediante fotogramas clave frameMove y la función rotate(), que controlan la rotación de cada símbolo.
Puedes ver un ejemplo de implementación aquí:
See the Pen Rotación_borde_marco_texto_CSS by Alex (@htmldesdecero) on CodePen.
#21. Efecto de máquina de escribir
El efecto de máquina de escribir de Frank Ino demuestra una excelente implementación de la animación de escritura con un cursor parpadeante realista, creando una atmósfera auténtica de una máquina de escribir.
@keyframes typewriter: controla el efecto de impresión, aumentando gradualmente el ancho del texto@keyframes blinkingCursor: crea el efecto de parpadeo del cursor
Puedes ver un ejemplo de implementación aquí:
See the Pen Efecto_máquina_escribir_CSS by Alex (@htmldesdecero) on CodePen.
#22. Animación de texto de máquina de escribir
La animación de máquina de escribir de Álvaro Montoro es un efecto de texto dinámico con varias opciones de cursor parpadeante, basado en la aparición secuencial de símbolos y una simulación realista del proceso de escritura.
@keyframes typing: simula el efecto de impresión@keyframes blink: hace que el cursor sea alternativamente completamente visible
Puedes ver un ejemplo de implementación aquí:
See the Pen Animación_texto_máquina_escribir_CSS by Alex (@htmldesdecero) on CodePen.
#23. Efecto de escritura en degradado
El efecto de escritura en degradado de Jasmine G es una implementación elegante de la animación de texto, donde cada símbolo aparece con un relleno de degradado suave, creando un efecto visual dinámico basado en fotogramas clave secuenciales.
blink: crea el efecto de un cursor parpadeante, alternando border-color entre visible y transparentetype: el texto se muestra letra por letra, simulando el efecto de escritura.
Puedes ver un ejemplo de implementación aquí:
See the Pen Efecto_escritura_degradado_CSS by Alex (@htmldesdecero) on CodePen.
#24. Ilustración del editor
En la ilustración del editor de Klare, se implementan muchos elementos interactivos, pero la característica clave es la animación de escritura, construida sobre las funciones y definiciones básicas de CSS que proporcionan la aparición suave de los símbolos y una simulación realista del proceso de impresión.
cursor: persistmaneja el efecto de parpadeo del cursor, animando su propiedad border-color- SCSS tiene bucles for para generar estilos repetidos e interpolación usando
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
#25. La aurora
La animación de la aurora boreal de Ostylowany utiliza las impresionantes capacidades de CSS para crear un efecto realista de la aurora boreal, basado en la interacción dinámica de gradientes de color y transiciones de animación suaves.
mix-blend-mode: para que los colores se mezclen donde se superponenborder-radius: existen varios valores de radio de borde que dan a los colores una forma orgánica de mancha.filter: blur(): para un efecto suave y brillante, que es necesario para crear la imagen
Puedes ver un ejemplo de implementación aquí:
See the Pen La_aurora_CSS by Alex (@htmldesdecero) on CodePen.
#26. Animación de sombra de texto
La efectiva animación de la sombra del texto impresiona con un doble conjunto de colores deslizantes que parecen dibujar el texto en el aire. Este fascinante efecto visual se crea mediante propiedades CSS avanzadas, donde las transiciones suaves y el cambio dinámico de las sombras crean la ilusión de un dibujo volumétrico de letras.
overflow: hidden: crea una máscara de recorte para revelar- bucle
@for: crea retrasos graduales para animar cada palabra
Puedes ver un ejemplo de implementación aquí:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
#27. Animación de fuente Work/Life
La creativa animación de la fuente Work/Life de Gayane Gasparian presenta un efecto de texto dinámico WORK LIFE BALANCE, utilizando fuentes variables. En esta animación, las palabras WORK y LIFE alternan eficazmente entre estilos gruesos/anchos y delgados/estrechos, creando un equilibrio visual que refleja perfectamente el concepto de un enfoque moderno para organizar el tiempo de trabajo y personal.
Puedes ver un ejemplo de implementación aquí:
See the Pen Animación_fuente_Work/Life_CSS by Alex (@htmldesdecero) on CodePen.
#28. Animación de fuente variable Breathe
La animación de fuente variable Breathe de Type Forward crea un efecto fascinante, haciendo que el texto «respire» visualmente mediante el cambio dinámico del peso de la fuente, lo que se logra mediante transiciones de animación suaves y tecnologías web modernas.
font-variation-settings: cambia el grosor de la fuente de 100 a 900 negritas@keyframes latter-breathe: anima los cambios en el grosor de la fuente creando un efecto de respiración
Puedes ver un ejemplo de implementación aquí:
See the Pen Animación_fuente_variable_Breathe_CSS by Alex (@htmldesdecero) on CodePen.
Con el uso correcto, las animaciones CSS pueden convertirse en una poderosa herramienta para mejorar la experiencia del usuario, pero recuerda: menos es más: mantén el equilibrio entre la estética y la funcionalidad.
