La animación con CSS es una forma eficaz de optimizar la experiencia de los visitantes de tu sitio web, ya sea mejorando la usabilidad de los botones, perfeccionando el estilo de la página o entreteniendo a los visitantes mientras el contenido se carga.
Si lo que te interesa es el HTML, consulta cómo hacer una página web en HTML paso a paso y cuál es la estructura HTML de una página web.
Como llevo mucho tiempo estudiando los sitios web y la forma en que captan la atención de los visitantes, reconozco una buena animación cuando la veo, y en este artículo te enseñaré cuáles son mis 30 ejemplos favoritos de animación con CSS.
Pero antes, veamos una pequeña introducción.
¿Cómo funcionan las animaciones con CSS?
La animación con CSS es una función que permite animar un cambio en una o varias propiedades de estilo de un elemento. Las animaciones con CSS puras no requieren código adicional (como JavaScript) ni elementos multimedia (como archivos GIF), sino que todo se hace con HTML y CSS.
Para hacer una animación con CSS sencilla, necesitas tres cosas: un elemento HTML que animar, una regla CSS que vincule la animación a ese elemento y un grupo de fotogramas clave que defina los estilos al inicio y al final de la animación. También puedes añadir declaraciones para personalizar aún más la animación, como la velocidad y el retardo.
Guía básica sobre HTML y CSS para marketers
Obtén una introducción básica a HTML y CSS diseñada para profesionales del marketing, que te permitirá comprender y utilizar estos lenguajes para mejorar tus habilidades digitales.
- Conoce qué es el HTML y el CSS.
- Descubre códigos esenciales de HTML.
- Aprende a actualizar el CSS.
- HTML y CSS: aspectos a evitar.
Descargar ahora
Todos los campos son obligatorios.
Este es un sencillo ejemplo de animación con CSS:
Consulta en CodePen el ejemplo de animación con CSS de HubSpot (@hubspot).
En esta animación de fotogramas clave con CSS, div es el elemento que estamos animando. Si observamos el CSS, veremos que las declaraciones de animación están asociadas al selector div. La declaración más importante aquí es animation-name, que vincula el fotograma clave my-animation al elemento div. Debajo hay varias declaraciones adicionales que afectan al tiempo y al comportamiento de la animación.
La animación en sí se crea con un fotograma clave, indicado por la regla @keyframes. Un fotograma clave define el estado inicial de la animación (dentro de from{ }) y su estado final (dentro de to{ }). El fotograma clave my-animation cambia tres propiedades de estilo de nuestro div: background-color, width, y top. Cuando estas tres propiedades se animan a la vez, se produce una animación coherente.
En este ejemplo, solo tenemos un fotograma clave. Los documentos con varios tipos de animaciones pueden tener varios fotogramas clave, cada uno vinculado a un elemento distinto.
Si quieres consultar más información a este respecto, consulta qué es la etiqueta div en HTML., o información general sobre las etiquetas de HTML.
Ejemplos de animación con fotogramas clave CSS
En este artículo, hemos recopilado ejemplos que van desde efectos de interacción básicos hasta verdaderas obras maestras. Estos ejemplos proceden de CodePen, un sitio web para crear y compartir "fragmentos de código" en HTML y CSS. Si necesitas inspiración, CodePen es un lugar estupendo para encontrarla.
Empezaremos con ejemplos que utilizan el enfoque tradicional de fotogramas clave descrito en la sección anterior. En general, estos ejemplos son más fáciles de reproducir en tus propios proyectos.
1. Íconos giratorios de carga
Las animaciones con CSS pueden utilizarse para crear efectos con los que todo el mundo está familiarizado, y estos íconos de carga giratorios son un gran ejemplo. Su significado se entiende casi universalmente, y además son ligeros de código. Este ejemplo concreto también muestra cómo conseguir un efecto similar con un gráfico vectorial que puede ampliarse.
Consulta en CodePen los íconos de carga sencillos en HTML y SVG de Stephen Delaney (@sdelaney).
Puedes ver el código haciendo clic en este enlace.
2. Cargadores sencillos con CSS
En esta sección incluimos más animaciones de carga que puedes probar, presentadas en una práctica cuadrícula para que puedas elegir las que más te gusten.
Consulta en CodePen los cargadores sencillos con CSS de Jenning (@jenning).
3. Formas rotatorias cambiantes
Aquí tienes un buen ejemplo para practicar: observa cómo cada una de las transiciones se aplica en diferentes fotogramas clave a lo largo de la animación.
Consulta en CodePen las animaciones con CSS de Matthew Dordal (@mdd).
4. Animación de desplazamiento de texto
Este fragmento de código es otra forma genial de mejorar el texto, porque aplica un efecto similar al de una máquina tragaperras que rota las palabras en pantalla. Es una técnica habitual en los sitios web que necesitan transmitir la versatilidad de sus creaciones. Si vendes un producto eficiente, fácil de usar y sostenible, puedes usar una animación como esta para presentar todas esas cualidades.
Consulta en CodePen las animaciones de texto de Yoann (@yoannhel).
Puedes ver el código haciendo clic en este enlace.
5. Botón animado de envío
Me encantan estas pequeñas creaciones con las que los diseñadores enriquecen sus páginas web. Este botón de envío brinda información visual para indicar que se ha completado una acción, como el envío de un formulario.
Consulta en CodePen esta animación con CSS del botón de envío diseñada por Dead Pixel (@dead_pixel).
6. Taza de café
Este fragmento demuestra que las animaciones sencillas pueden llegar muy lejos. En este ejemplo, al aplicar una animación con CSS a la traducción, la escala y el fundido de opacidad, damos vida a un dibujo que, de otro modo, sería demasiado básico.
Consulta en CodePen las animaciones relacionadas con el café de Zane Wesley (@zanewesley).
Puedes ver el código haciendo clic en este enlace.
7. Cafetera
En el blog de HubSpot, nos encanta el café, así que aquí tienes otro ejemplo de animación con CSS sobre el mismo tema, que mejora el diseño para hacerlo aún más envolvente. Es algo que los usuarios apenas notarán, pero que apreciarán a pesar de todo.
Consulta en CodePen las animaciones relacionadas con el café de Zane Wesley (@zanewesley).
Puedes ver el código haciendo clic en este enlace.
Códigos de programación para CSS
Descarga códigos y snippets CSS útiles y funcionales para personalizar y mejorar el diseño de tu sitio web de manera efectiva.
- Pestañas de navegación CSS.
- JavaScript onClick con CSS.
- Degradados CSS.
- Desplegables CSS.
Descargar ahora
Todos los campos son obligatorios.
8. Botón animado
Si necesitas atraer a un usuario hacia una CTA, en lugar de usar diferentes colores o modales, puedes agregar un peculiar efecto de movimiento a un botón como este. Me gusta este efecto porque puede captar la atención sin ser invasivo ni interrumpir el flujo del visitante.
Consulta en CodePen este botón animado de Donovan Hutchinson (@donovanh).
Puedes ver el código haciendo clic en este enlace.
9. Pacman
No te recomiendo que pongas esta animación con CSS en tu sitio web para no infringir derechos de autor, pero es un ejemplo divertido que puedes usar como inspiración.
Consulta en CodePen la animación de Pacman de Riccardo (@Ferie).
Puedes ver el código haciendo clic en este enlace.
10. Tres puntos cargando
Este es otro ejemplo de animación con CSS utilizada para crear un efecto de carga muy común. Con un sencillo cambio de tamaño, puedes usar estos tres puntos para pedir a los usuarios que esperen un momento.
Consulta en CodePen esta animación de tres puntos cargando diseñada por Aliaksei Peterson (@petersonby).
Puedes ver el código haciendo clic en este enlace.
11. Caja animada
Evocando a Sísifo, esta animación muestra una caja que intenta subir una pendiente pero que luego vuelve a caer al punto de partida. Es un ejemplo que podría usarse como animación de carga, y cuando se complete el proceso, la caja podría acabar volcando por el otro lado.
Consulta en CodePen la caja animada de Pawel (@pawelqcm).
12. Abanico de colores
Creo que el siguiente ejemplo de animación con CSS funciona especialmente bien en los sitios web de empresas que se centran en el diseño. Con ella, puedes presentar tus colores corporativos en forma de paleta para crear un efecto de abanico y dar vida a tu sitio web.
Consulta en CodePen la animación con CSS de la paleta de colores de Nitish Khagwal (@nitishkmrk).
Puedes ver el código haciendo clic en este enlace, y también puedes consultar cómo poner un color de fondo en HTML o cómo indicar colores en HTML.
13. Hormigas en un terrón de azúcar
Si no te gustan los bichos, no me ofenderé si te saltas este ejemplo. Sin embargo, es una implementación muy eficiente de las propiedades left, bottom, y transform. Lo único que hacen los fotogramas clave es cambiar la ubicación de cada elemento SVG "ant" (hormiga).
Consulta en CodePen la animación con CSS de hormigas en un terrón de azúcar creada por Stephen Fairbanks (@thathurtabit).
14. Interruptor en 3D
Los interruptores son elementos básicos del diseño de las interfaces de usuario. Este ejemplo da un giro tridimensional al concepto, con una animación suave para el cambio de estado. Aquí, el desarrollador ha transformado el elemento CSS de casilla de verificación en algo más interesante.
Consulta CodePen el interruptor tridimensional de Jon Kantner (@jkantner).
Puedes ver el código haciendo clic en este enlace.
15. Submarino
El CSS es el código perfecto para crear ilustraciones y animaciones sencillas y llenas de color. Este código combina varios efectos para dibujar un submarino que encantará a tus visitantes. El único cambio que sugeriría es hacerlo amarillo en honor a los Beatles.
Consulta en CodePen el submarino con CSS de Alberto Jerez (@ajerez).
Puedes ver el código haciendo clic en este enlace.
16. Título animado al pasar el ratón por encima
Este ejemplo de animación con CSS de Olivia Ng explora varias formas de añadir dinamismo al texto de un título, y demuestra todo lo que puede mejorar el texto con tan solo un par de fotogramas clave.
Consulta en CodePen el efecto de animación para títulos de Olivia Ng (@oliviale).
Puedes ver el código haciendo clic en este enlace.
17. Gato minimalista
Este ejemplo de animación en CSS hace un uso muy eficiente del espacio negativo combinándolo con animaciones bien sincronizadas. Es un diseño sencillo que transmite mucha personalidad solo con la propiedad CSS "transform".
Consulta en CodePen este gato minimalista animado de Johan Mouchet (@johanmouchet).
Puedes ver el código haciendo clic en este enlace.
18. Barras que se expanden y contraen
Las animaciones con CSS también pueden usarse para mejorar la visualización de datos. Este ejemplo muestra cómo los colores y la velocidad pueden crear diferentes efectos en los gráficos de barras dinámicos, y la animación con CSS te permite cambiar la velocidad y el número de repeticiones.
Consulta en CodePen los logotipos animados de Dan Peddle (@dazld).
Puedes ver el código haciendo clic en este enlace, y si te interesa el enriquecimiento visual de páginas, también puedes consultar cómo hacer tablas en HTML.
19. Cuadrados giratorios
Aquí tienes un ejemplo de animación con CSS sorprendentemente sencillo que crea un efecto alucinante. En él, se aplica el mismo efecto de rotación a todos los "divs" cuadrados de la página. Sus diferencias de tamaño hacen que giren a velocidades diferentes, creando la ilusión que ves en el gráfico.
Consulta en CodePen la animación Twisty de Mike King (@micjamking).
20. Rayos láser
Seguramente este sea uno de los ejemplos de animación con CSS más complejos de esta lista. Sin embargo, también es una pantalla de carga original y cautivadora con la que mantener la atención de los visitantes durante un breve periodo.
Consulta en CodePen estas animaciones de carga diseñadas por Maxime Rossignol (@Maxoor).
Puedes ver el código haciendo clic en este enlace.
21. Velas
Me encanta este ejemplo de cómo una animación con CSS puede contar una historia de forma totalmente visual. Es probable que necesites mucha práctica para conseguir algo así, pero seguro que llamará la atención de quienes visiten tu sitio por primera vez.
Consulta en CodePen estas velas animadas diseñado por Kevin David (@kevin_David_k).
Puedes ver el código haciendo clic en este enlace.
22. Camión a toda velocidad
Este ejemplo de animación con CSS, diseñado por Chris Johnson, usa el efecto de paralaje para simular el avance de un camión a toda velocidad sobre un fondo. Aunque el código es aparentemente muy sencillo, está repleto de detalles con varios usos creativos de la propiedad "transform", y hasta incluye un pequeño bache en el camino.
Consulta en CodePen el camión animado de Tippy Fodder (@tippyfodder).
Puedes ver el código haciendo clic en este enlace, y si necesitas cambiar la imagen de fondo, puedes consultar este artículo sobre cómo poner y cambiar una imagen de fondo en HTML.
23. Globo de nieve
Este ejemplo de animación con CSS de un globo de nieve puede dar a tus páginas un toque poético que no conseguirías con una imagen fija. Observa cómo la animación de la nieve se limita al perímetro del globo de cristal.
Consulta en CodePen la animación del globo de nieve de Coding Artist (@Coding-Artist).
Puedes ver el código haciendo clic en este enlace.
Otros ejemplos de animación con CSS
Aquí tienes otros ejemplos que no utilizan fotogramas clave (o los utilizan muy poco) para la animación con CSS. En su lugar, aprovechan otras técnicas más complejas para conseguir el efecto deseado.
24. Imagen flotante
El efecto "flotante" es un uso sutil, sencillo y eficaz de la animación. En este caso, se utiliza para mostrar un ícono con excelentes resultados.
Consulta en CodePen la animación flotante de Mario Duarte (@MarioDesigns).
Puedes ver el código haciendo clic en este enlace.
Códigos de programación para CSS
Descarga códigos y snippets CSS útiles y funcionales para personalizar y mejorar el diseño de tu sitio web de manera efectiva.
- Pestañas de navegación CSS.
- JavaScript onClick con CSS.
- Degradados CSS.
- Desplegables CSS.
Descargar ahora
Todos los campos son obligatorios.
25. Efecto de transición CSS al pasar el ratón
Esta animación muestra un sencillo pero eficaz efecto de texto resaltado cuando el usuario pasa el ratón por encima. Creo que es una forma estupenda de añadir un poco más de estilo a los enlaces de las páginas.
Consulta en CodePen este efecto de transición de Adam Argyle (@argyleink).
Puedes ver el código haciendo clic en este enlace.
26. Logotipo animado al pasar el ratón por encima
Fíjate en el logotipo de la esquina inferior derecha del ejemplo de abajo: esta animación con CSS aplica una sutil animación al pasar el ratón por encima. Es otra señal visual para los usuarios que puedes agregar a tu sitio para enriquecer la navegación.
Consulta en CodePen esta animación para logotipos de Yorick Shan (@yorickshan.
Puedes ver el código haciendo clic en este enlace.
27. Texto rotatorio
Este ejemplo es una excepción, porque la animación utiliza JavaScript. Sin embargo, es ideal para una página de inicio. Sus transiciones son increíblemente suaves, y tienes la opción de personalizar los efectos que utiliza para pasar de una palabra a otra.
Consulta en CodePen este texto giratorio de alphardex (@alphardex).
28. Sobre animado
Uno de mis ejemplos favoritos es esta elegante animación con CSS que presta mucha atención a los detalles: desde el movimiento de apertura a la textura del papel y la sombra inferior. Esta animación sería perfecta para un botón o un ícono de desplazamiento.
Consulta en CodePen el botón de correo animado con CSS animado de Jake Giles-Phillips (@jakegilesphillips).
Puedes ver el código haciendo clic en este enlace.
29. Archivador
Para enriquecer tus menús, puedes usar este ejemplo de animación con CSS que simula un archivador. Sus cajones se abren ligeramente al pasar el ratón, por lo que puede ayudarte a destacar elementos de navegación específicos.
Consulta en CodePen el archivador animado con CSS de Jhey (@jh3y).
Puedes ver el código haciendo clic en este enlace.
Si quieres consultar más información sobre los menús, echa un vistazo a cómo crear un menú desplegable en HTML.
30. Astronauta
Este ejemplo de animación con CSS combina un efecto flotante con una simpática ilustración perfecta para enriquecer cualquier página.
Consulta en CodePen el astronauta animado con CSS de Coding Artist (@Coding-Artist).
Puedes ver el código haciendo clic en este enlace.
Un último ejemplo
Como hemos visto, un simple toque de animación CSS puede ayudar a crear una experiencia más envolvente para tus visitantes. Las mejores animaciones enriquecen el contenido y la experiencia sin distraer ni parecer artificiosas, y todos los ejemplos anteriores logran este equilibrio extraordinariamente bien.
Sin embargo, no quería terminar este artículo sin incluir un último ejemplo que me ha dejado boquiabierto. Este ejemplo de la torre de vigilancia probablemente sea demasiado complejo para este artículo, pero demuestra los fantásticos resultados que podemos obtener al combinar CSS y HTML.
Consulta en CodePen la animación con CCS de la torre de vigilancia de Travis Doughty (@tdoughty).
Para ver más viñetas increíbles como ésta, echa un vistazo al perfil de CodePen del creador y empieza a pensar en tus propias ideas.
