Saltar al contenido

24 ejemplos creativos y únicos de animación CSS para inspirarte

febrero 19, 2022
24 Creative CSS Animation Examples to Inspire Your Own.jpegkeepProtocol

Ya sea para mejorar un botón, matar el tiempo mientras se carga una página o agregar un estilo adicional a una página de destino, la animación es una forma efectiva de mantener la atención y deleitar a los espectadores en su sitio web.

Si bien hay varias formas de agregar gráficos animados a una página web, una de las más fáciles es usar animaciones CSS, que no requieren nada más que algunos conocimientos de HTML y CSS para lograrlo.

Si desea agregar animaciones CSS a su trabajo, puede ser útil ver algunos usos exitosos de las animaciones CSS antes de sumergirse. Esta investigación adicional puede inspirar sus propios proyectos y brindar una idea de lo que puede lograr con esto. característica poderosa.

Es por eso que hemos compilado nuestros ejemplos favoritos de animación CSS de CódigoPen — una herramienta en línea para crear y compartir fragmentos de código en HTML y CSS — para ayudar a que fluya la creatividad.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Pero antes, un breve repaso al tema que nos ocupa…

¿Cómo funcionan las animaciones CSS?

La animación CSS es una característica de CSS que le permite animar un cambio en una o más propiedades de estilo de un elemento, así como controlar varios aspectos de la animación. Las animaciones CSS puras no requieren código adicional (p. ej., JavaScript) ni medios (p. ej., GIF); todo se hace con HTML y CSS.

Las animaciones CSS son excelentes para los sitios web que desean agregar contenido dinámico y atractivo sin poner mucho más peso en la página. Dado que no requieren secuencias de comandos adicionales, es poco probable que las animaciones CSS ralenticen sus páginas.

Para hacer una animación CSS, necesita tres cosas: un elemento HTML para animar, una regla CSS que vincule la animación a este elemento y un grupo de fotogramas clave que defina los estilos al principio y al final de la animación. También puede agregar declaraciones para personalizar aún más su animación, como la velocidad y el retraso.

Para demostrarlo, aquí hay un ejemplo simple de una animación CSS:

ver la pluma Ejemplo de animación CSS de Christina Perricone (@hubspot) sobre CódigoPen.

En este ejemplo,

es el elemento que estamos animando. Mirando el CSS, vemos que nuestras declaraciones de animación están asociadas con el división selector. La declaración más importante aquí es nombre-de-animaciónque une el fotograma clave mi-animación para nuestro división elemento. Debajo hay varias declaraciones adicionales que afectan el tiempo y el comportamiento de la animación.

La animación en sí se crea con un fotograma clave, indicado por el @fotogramas clave regla. Un fotograma clave define el estado inicial de la animación (dentro desde{}) y su estado final (dentro para{}). el fotograma clave mi-animación cambia tres propiedades de estilo de nuestro div: color de fondo, anchoy cima. Cuando estas tres propiedades se animan a la vez, se produce una animación coherente.

En nuestro ejemplo, solo tenemos un fotograma clave. Los documentos con varios tipos de animaciones pueden tener varios fotogramas clave, cada uno vinculado a un elemento diferente.

Ejemplos de animación CSS

A continuación, hemos compilado 24 ejemplos de animación CSS que van desde efectos de interacción básicos hasta obras de arte literales (al menos según yo). Siéntase libre de usarlos como inspiración en sus propios proyectos.

1. Efecto de transición de desplazamiento del mouse CSS

Comenzando con la luz, esta animación muestra un efecto de resaltado de texto simple pero efectivo activado por una acción de pasar el mouse. Es una excelente manera de agregar un toque extra a los enlaces de su página.

ver la pluma Efecto de transición de mouse-out de CSS de Adam Argyle (@argyleink) sobre CódigoPen.

Ver el código aquí.

2. Spinners de carga simples

Las animaciones CSS se pueden usar para crear efectos con los que todos estamos familiarizados: estos íconos de carga giratoria son un ejemplo de ello. Su significado se entiende casi universalmente, y también son ligeros en el código. Este ejemplo particular también muestra cómo lograr un efecto similar con un gráfico vectorial escalable.

ver la pluma Spinners de carga HTML y SVG simples por Stephen Delaney (@sdelaney) sobre CódigoPen.

Ver el código aquí.

3. Animación de texto en movimiento

Otra forma genial de mejorar su texto, este fragmento de código aplica un efecto similar a una máquina tragamonedas que rota las palabras dentro y fuera de la vista. Esta es una técnica común en sitios web que necesitan transmitir la versatilidad de sus creaciones. ¿Es su producto eficiente, fácil de usar y sostenible? Conecta esas palabras en una animación como esta.

ver la pluma Animación de texto por Yoann (@yoannhel) sobre CódigoPen.

Ver el código aquí.

4. Botón de envío animado

Los usuarios aprecian los pequeños e inesperados momentos de deleite que a los diseñadores expertos les gusta espolvorear en sus páginas web. Este botón de envío es una forma limpia y agradable de proporcionar comentarios visuales que indican que se ha completado una acción, como el envío de un formulario.

ver la pluma Botón Enviar animación css pura por Píxel muerto (@pixel muerto) sobre CódigoPen.

Ver el código aquí.

5. Logotipo sensible al desplazamiento

Mire el logotipo en la esquina inferior derecha del bolígrafo a continuación: esta animación aplica una animación sutil al pasar el mouse por encima. Es otra señal visual para los usuarios que hace que navegar por su sitio web sea un poco más agradable.

ver la pluma Plantilla: Logotipo por Alex Katz (@katzkode) sobre CódigoPen.

Ver el código aquí.

6. Sobre de apertura

Uno de mis ejemplos favoritos, esta elegante animación presta mucha atención a los detalles. Desde el movimiento hacia abajo cuando se abre el sobre, hasta los detalles en el papel y la sombra debajo, está claro cómo los pequeños toques se suman a una animación fluida y coherente. Esto sería un gran botón o animación de desplazamiento.

ver la pluma Botón de correo CSS animado de Jake Giles-Phillips (@jakegilesphillips) sobre CódigoPen.

Ver el código aquí.

7. Café caliente

El fragmento a continuación ejemplifica cómo las animaciones simples pueden funcionar. En este caso, la aplicación de animación CSS a la traducción, la escala y el desvanecimiento de la opacidad le da vida a un dibujo que de otro modo sería sencillo.

ver la pluma Café caliente por Zane Wesley (@zanewesley) sobre CódigoPen.

Ver el código aquí.

8. Cafetera

Nos encanta nuestro café, así que aquí hay uno más. En este caso, la animación no roba el foco. Más bien, mejora el diseño cuidadoso a su alrededor para hacer que todo el elemento se sienta más inmersivo.

ver la pluma Cafetera Pura Animación CSS de Henrique Rodrigues (@hjdesigner) sobre CódigoPen.

Ver el código aquí.

9. Botón de movimiento

¿Necesita atraer a un usuario a una acción en particular? En lugar de un flash de color o un modal, considere agregar un efecto de movimiento peculiar a un botón. Es una forma amigable pero efectiva de captar la atención sin parecer invasivo o interrumpir significativamente el flujo del visitante.

ver la pluma Guardar movimiento de botón por Donovan Hutchinson (@donovanh) sobre CódigoPen.

Ver el código aquí.

10. Pacman

No recomiendo colocar este en su sitio por riesgo de infracción de derechos de autor, pero es divertido verlo de todos modos.

ver la pluma pac-man por Ricardo (@feria) sobre CódigoPen.

Ver el código aquí.

11. Carga de tres puntos

Otro ejemplo de animaciones CSS que crean un efecto de carga con el que muchos de nosotros estamos familiarizados. Un simple cambio de escala es todo lo que se necesita para decir: «Un momento, por favor».

ver la pluma Cargador CSS con puntos por Alexey Peterson (@petersonby) sobre CódigoPen.

Ver el código aquí.

12. Cajones para archivos

Para animar sus menús, considere algo como los cajones de archivos CSS puros a continuación. Sus gabinetes se abren ligeramente al pasar el mouse, lo que ayuda a que su navegación principal se destaque de los demás.

ver la pluma Cajones de CSS puro ʕノ•ᴥ•ʔノ ︵ ┻━┻ por Jhey (@jh3y) sobre CódigoPen.

Ver el código aquí.

13. Abanico de colores

El siguiente ejemplo funciona especialmente bien para sitios web comerciales centrados en el diseño: intente animar sus paletas de colores para crear un efecto de abanico y cambie las cosas desde cuadrados de colores básicos.

ver la pluma Paleta de colores con animación CSS pura por Nitish Khagwal (@nitishkmrk) sobre CódigoPen.

Ver el código aquí.

14. Interruptor de palanca 3D

El interruptor de encendido/apagado es un elemento básico del diseño de la interfaz de usuario. Este ejemplo le da un giro tridimensional al concepto, completo con una animación suave para alternar el estado. Aquí, el desarrollador ha modificado el elemento de entrada de la casilla de verificación CSS en algo mucho más interesante.

ver la pluma Interruptor de palanca con mango de orificio de Jon Kantner (@jkantner) sobre CódigoPen.

Ver el código aquí.

15. Submarino

CSS funciona bien para ilustraciones y animaciones planas y coloridas. El siguiente código combina varios efectos para dibujar, francamente, un adorable submarino. El único cambio que sugeriría es hacerlo amarillo.

ver la pluma Submarino con CSS de Alberto Jerez (@ajerez) sobre CódigoPen.

Ver el código aquí.

16. Texto de título animado al pasar el mouse

El ejemplo «Efecto de desplazamiento para encabezados» de Olivia Ng explora varias formas de agregar dinamismo al texto del título. Muestra cómo solo un par de fotogramas clave pueden elevar sus encabezados.

ver la pluma Efecto de desplazamiento para encabezados por Olivia Ng (@oliviale) sobre CódigoPen.

Ver el código aquí.

17. Imagen flotante

El efecto «flotante» es un uso sutil, simple y efectivo de las animaciones CSS. En este caso, se utiliza para mostrar un icono con excelentes resultados.

ver la pluma Animación flotante – CSS de Mario Duarte (@MarioDesigns) sobre CódigoPen.

Ver el código aquí.

18. astronauta

Aquí hay otro uso inteligente del efecto flotante, junto con una ilustración amigable fuera de este mundo. Otro ejemplo más de un sutil efecto de animación CSS para mejorar la sensación de un elemento de página.

ver la pluma Astronauta Css Puro Animado por Artista de codificación (@Coding-Artista) sobre CódigoPen.

Ver el código aquí.

19. Gato mínimo

Este ejemplo hace un uso inteligente del espacio negativo combinado con algunas animaciones CSS oportunas. Es un diseño simple que transmite mucha personalidad solo con la propiedad de transformación CSS.

ver la pluma Animación de gato CSS puro de Johan Mouchet (@johanmouchet) sobre CódigoPen.

Ver el código aquí.

20. Barras crecientes/reductoras

CSS se puede usar para animar visualizaciones y comunicar sus hallazgos de manera más efectiva. Este ejemplo demuestra cómo los colores y la velocidad pueden crear diferentes sensaciones para los gráficos de barras dinámicos: las animaciones CSS le permiten cambiar la velocidad y la cantidad de repeticiones en sus animaciones.

ver la pluma Tiempo de reproducción del logotipo de Dan Peddle (@dazld) sobre CódigoPen.

Ver el código aquí.

21. Etiqueta láser

Admito que este es uno de nuestros ejemplos más complejos. Sin embargo, lo convierte en una pantalla de carga única y cautivadora para llamar la atención durante un breve período.

ver la pluma The Glowing Loader – Animación CSS pura de Maxime Rossignol (@Maxoor) sobre CódigoPen.

Ver el código aquí.

22. velas

Aquí hay un ejemplo brillante de cómo las animaciones CSS pueden contar una historia, aunque sea corta. Es probable que necesite mucha práctica para lograr algo como esto, pero seguramente se mantendrá entre los que visitan su sitio por primera vez.

ver la pluma Vela divertida Animación CSS pura por Kevin David (@kevin_david_k) sobre CódigoPen.

Ver el código aquí.

23. Camión veloz

“Speedy Truck” de Chris Johnson hace un uso inteligente del paralaje para simular la conducción de un camión a través de un entorno natural. Si bien es minimalista, este bolígrafo lo compensa con varios usos creativos de la propiedad de transformación; incluso hay un pequeño bache en el camino.

ver la pluma camión veloz por Chris Johnson (@ChrisJohnson) sobre CódigoPen.

Ver el código aquí.

24. Bola de nieve

El ejemplo más acogedor que pudimos encontrar, esta animación de globo de nieve agrega un ambiente a su página que no obtendrá con una imagen fija. Observe cómo la nieve se anima solo dentro de los límites del globo de «vidrio».

ver la pluma Animación de globo de nieve de Navidad por Artista de codificación (@Coding-Artista) sobre CódigoPen.

Ver el código aquí.

Un último ejemplo

Como hemos visto, solo un toque de animación CSS puede ayudar mucho a crear una experiencia más inmersiva para sus visitantes. Las mejores animaciones sirven su contenido y experiencia sin distraer o parecer engañosos: todos los ejemplos anteriores…