Ejemplos Codepen (generador animaciones css)
Ya sea mejorando un botón, matando el tiempo durante las cargas de la página o añadiendo algún estilo adicional a una página de destino, la animación es una manera efectiva de mantener la atención y deliciar a los espesores en su sitio web.
Aunque hay varias maneras de añadir gráficos animados a una página web, una de las más fáciles es usar animaciones CSS, que requieren nada más que algún know-how HTML y CSS para lograr.
Si desea agregar animaciones CSS a su trabajo, puede ser útil ver algunos usos exitosos de las animaciones CSS primero antes de bucear. Esta investigación extra puede inspirar sus propios proyectos y proporcionar una idea de lo que puede lograr con esta poderosa característica.
Por eso recopilamos nuestros ejemplos favoritos de animación CSS de CodePen, una herramienta en línea para crear y compartir fragmentos de código en HTML y CSS para ayudar a que los jugos creativos fluyen.
Pero primero, una breve revisión del tema a la mano…
Cómo funcionan las animaciones CSS?
La animación CSS es una característica de CSS que 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 Pure CSS no requieren código adicional (por ejemplo. JavaScript) o medios (e.g. GIFs) Todo está hecho con HTML y CSS.
Las animaciones CSS para los sitios web
Las animaciones CSS son geniales para los sitios web que quieren añadir contenido dinámico y atractivo sin poner mucho más peso en la página. Dado que no requieren scripts adicionales, es poco probable que las animaciones de CSS ralentizarán sus páginas.
Para hacer una animación CSS, necesitas tres cosas: un elemento HTML para animar, una regla CSS que une la animación a este elemento, y un grupo de fotogramas clave que define 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 velocidad y retraso.
Para demostrar, aquí es un simple ejemplo de una animación CSS:
See the Pen CSS Animation Example by HubSpot (@hubspot) on CodePen.
En este ejemplo, el <div></div>elemento que animamos.Embaloa. Mirando el CSS, vemos que nuestras declaraciones de animación están asociadas con el selector de div. La declaración más importante aquí es el nombre de animación, que une el fotograma clave mi-animación a nuestro elemento div. A continuación se encuentran varias declaraciones adicionales que afectan el momento y el comportamiento de la animación.
La animación en sí se crea con un marco clave, indicado por la regla de los marcos de tec. Un fotograma clave define el estado de salida de la animación (dentro desde) y su estado final (dentro de la misma). El fotograma de claves my-animation cambia tres propiedades de estilo de nuestro div: fondo-color, ancho y superior. Cuando estas tres propiedades se animan a la vez, produce una animación coherente.
En nuestro ejemplo, sólo tenemos un marco clave. Los documentos con múltiples tipos de animaciones pueden tener múltiples marcos clave, cada uno vinculado a un elemento diferente.
Ejemplos de animaciones CSS con Codepen
A continuación, compilamos 24 ejemplos de animación CSS que van desde efectos de interacción básica hasta obras de arte literales (al menos de acuerdo con mí). Siéntase libre de utilizarlos para inspirarse en sus propios proyectos.
1. CSS Mouse Hover Transition Effect
Comenzando las cosas a la luz, esta animación muestra un efecto de resaltamiento simple pero efectivo desencadenado por una acción de ratón. Es una gran manera de añadir un poco de estilo extra a los enlaces de su página.
See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.
Mira el código aquí.
2. Simple Loading Spinners
Las animaciones CSS se pueden utilizar para crear efectos con los que somos todos familares, estos iconos de carga giratoria son uno de esos ejemplos. Su significado es casi universalmente entendido, y ellos también luz sobre el código. Este ejemplo en particular también muestra cómo lograr un efecto similar con un gráfico vectorial escalable.
See the Pen Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney) on CodePen.
Mira el código aquí.
3. Animación de texto de desplazamiento
Otra forma genial de mejorar tu texto, este fragmento de código aplica un efecto tipo máquina ranura que gira 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? Conecte esas palabras en una animación como ésta.
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
Mira el código aquí.
4. Botón de Enviar Animado
Los usuarios aprecian los pequeños e inesperados momentos de deleización que a los diseñadores inteligentes les gusta espolvocar a través de sus páginas web. Este botón de envío es una forma limpia y agradable de proporcionar retroalimentación visual que indica que se ha completado una acción, como un formulario que se está presentando.
See the Pen Submit Button pure css animation by Dead Pixel (@dead_pixel) on CodePen.
Mira el código aquí.
5. Logo que arpone el Hover-Responsive
Echa un vistazo al logotipo en la esquina inferior derecha de la pluma de abajo. Esta animación aplica una animación sutil en el empuje del ratón. Es otra señal visual para los usuarios que hace que navegar por su sitio web sea un poco más agradable.
See the Pen Template: Logo by Alex Katz (@katzkode) on CodePen.
Mira el código aquí.
6. Apertura Envoltorio
Uno de mis ejemplos favoritos, esta elegante animación presta mucha atención al detalle. Desde el movimiento hacia abajo a medida que se abre la envolvente, hasta los detalles en el papel, hasta la sombra debajo, se despejan cómo pequeños toques se suman a una animación suave y coherente. Esto haría un gran botón o animación de desplazamiento.
See the Pen Animated CSS Mail Button by Jake Giles-Phillips (@jakegilesphillips) on CodePen.
Mira el código aquí.
7. Café caliente
El fragmento de abajo ejemplifica cómo las animaciones simples pueden ir por el camino. En este caso, la aplicación de la animación CSS a la traducción, escala y opacidad se desvanecen añade vida a un dibujo de otro modo.
See the Pen Hot Coffee by Zane Wesley (@zanewesley) on CodePen.
Mira el código aquí.
8. Máquina de café
Nos encanta nuestro café, así que aquí está uno más. En este caso, la animación no roba el enfoque. Más bien, mejora el diseño cuidadoso a su alrededor para hacer que todo el elemento se sienta más inmersivo.
See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) on CodePen.
Mira el código aquí.
9. Button Wiggle
Necesitas atraer a un usuario a una acción en particular? En lugar de un flash de color o un modal, considere añadir un efecto de wiggle peculiar a un botón. Es una manera amistosa pero eficaz de captar la atención sin parecer invasiva o perturbadora significativamente el flujo de visitantes.
See the Pen Save button wiggle by Donovan Hutchinson (@donovanh) on CodePen.
Mira el código aquí.
10. Pacman
No recomiendo colocar este en su sitio para el riesgo de infracción de derechos de autor, pero es divertido mirar a pesar de todo.
See the Pen Pacman by Riccardo (@Ferie) on CodePen.
Mira el código aquí.
11. Tres puntos cargados
Otro caso de animaciones CSS creando un efecto de carga que muchos de nosotros estamos familiarizados. Un simple cambio de escala es todo lo que se necesita para decir, «Sólo un momento, por favor».
See the Pen CSS Loader with dots by Aliaksei Peterson (@petersonby) on CodePen.
Mira el código aquí.
12. Cajajeres de archivos
Para amenar sus menús, considere algo así como los cajones de archivos CSS puros de abajo. Sus gabinetes se abren ligeramente en el ratón flotando, ayudando a su navegación primaria destaque de otros.
See the Pen Pure CSS Drawers ʕノ•ᴥ•ʔノ ︵ ┻━┻ by Jhey (@jh3y) on CodePen.
Mira el código aquí.
13. Fan de color
Este siguiente ejemplo funciona especialmente bien para sitios web de negocios centrados en el diseño. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
See the Pen Color Palette with Pure CSS Animation by Nitish Khagwal (@nitishkmrk) on CodePen.
Mira el código aquí.
14. Cambiar de toggle en 3D
El interruptor de encendido/apaga es un elemento básico del diseño de la interfaz de usuario. Este ejemplo da un giro tridimensional en el concepto, completo con una animación suave para el estado de alternar. Aquí, el desarrollador ha modificado el elemento de entrada de la casilla de verificación CSS en algo mucho más interesante.
See the Pen Toggle Switch with a Hole Handle by Jon Kantner (@jkantner) on CodePen.
Mira el código aquí.
15. Submarino
CSS funciona bien para ilustraciones planas y coloridas y animaciones. El código a continuación combina varios efectos para dibujar un submarino adorable. El único cambio que sugeriría es hacerlo amarillo.
See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.
Mira el código aquí.
16. Texto de Título animado en Hover
Olivia Nás Effect para Headers example explora varias maneras de añadir dinamismo al texto de título. Muestra cómo sólo un par de marcos clave pueden elevar sus encabezados.
See the Pen Hover Effect for Headers by Olivia Ng (@oliviale) on CodePen.
Mira el código aquí.
17. Imagen flotante
El efecto floating es un uso sutil, sencillo y eficaz de las animaciones CSS. En este caso, se utiliza para mostrar un icono con excelentes resultados.
See the Pen Floating Animation – CSS by Mario Duarte (@MarioDesigns) on CodePen.
Mira el código aquí.
18. Astronauta
Este es otro uso inteligente del efecto flotante, combinado con una ilustración amistosa fuera de este mundo. Otra instancia de un efecto de animación CSS sutil para mejorar la sensación de un elemento de página.
See the Pen Pure Css Astronaut Animated by Coding Artist (@Coding-Artist) on CodePen.
Mira el código aquí.
19. Mínima Cat
Este ejemplo hace un uso inteligente del espacio negativo combinado con algunas animaciones CSS bien oportuna. Es un diseño sencillo que transmite mucha personalidad con la propiedad transformada CSS sola.
See the Pen Pure CSS cat animation by Johan Mouchet (@johanmouchet) on CodePen.
Mira el código aquí.
20. Bares de crecimiento/Shrinking
CSS se puede utilizar para animar las visualizaciones y comunicar sus hallazgos de manera más efectiva. Este ejemplo demuestra cómo los colores y la velocidad pueden crear diferentes sedas para los gráficos dinámicos de barras.
See the Pen Logo playtime by Dan Peddle (@dazld) on CodePen.
Mira el código aquí.
21. Tag láser
Admitiré que este es uno de nuestros ejemplos más complejos. Sin embargo, hace que una pantalla de carga única y cautivadora mantenga la atención durante un breve período.
See the Pen The Glowing Loader – Pure CSS Animation by Maxime Rossignol (@Maxoor) on CodePen.
Mira el código aquí.
22. Candelas
Aquí está un brillante ejemplo de cómo las animaciones de CSS pueden contar una historia, aunque una breve. Probablemente necesitarás mucha práctica para sacar algo así, pero seguro que sobresaldrá con los que visitan tu sitio por primera vez.
See the Pen Funny Candle Pure CSS Animation by Kevin David (@kevin_David_k) on CodePen.
Mira el código aquí.
23. Velero camión
Chris Johnsons «Speedy Truck», hace un uso inteligente de paralaje para simular un camión en coche a través de un entorno natural. Aunque minimalista, este bolígrafo lo compensa con varios usos creativos de la propiedad de la transformada, incluso un pequeño bache en el camino.
See the Pen Speedy truck by Tippy Fodder (@tippyfodder) on CodePen.
Mira el código aquí.
24. Globo de la Nieve
El ejemplo más acogedor que pudimos encontrar, esta animación de la bola de nieve, añade un ambiente a su página que no conseguirá con una imagen fija. Observe cómo la nieve se anima sólo dentro de los confines del globo de cristal.
See the Pen Christmas Snow Globe Animation by Coding Artist (@Coding-Artist) on CodePen.
Mira el código aquí.
25. Chimega Gif
Siguiendo con la comodidad del ejemplo de la bola de nieve de arriba, tenemos una chimega gif que usted puede agregar a su página para mejorar aún más el calor de su página. En este ejemplo, se puede ver la animación CSS de derecha a izquierda mientras la chimega se desliza y se detiene una vez que se completa la animación.
See the Pen CSS "animation" Slide Right Demo by HubSpot (@hubspot) on CodePen.
Un último ejemplo
Como hemos visto, sólo un toque de animación CSS puede ir muy lejos en la elaboración de una experiencia más inmersiva para sus visitantes. Las mejores animaciones sirven a su contenido y experiencia sin distraer o aparecer gimmicky todos los ejemplos anteriores logran este equilibrio notablemente bien.
Sin embargo, no pudimos resistirnos a añadir un último ejemplo que nos dejó botes. Este ejemplo de la Torre de Cuidado está probablemente más allá del alcance de esta pieza en su complejidad, pero también es un testimonio de lo que CSS y HTML por sí solos pueden lograr.
See the Pen Watch Tower Pure CSS Animation by Travis Doughty (@tdoughty) on CodePen.
Para más de estas viñetas impresionantes como esta, echa un buen registro de CodePen y empieza a pensar ideas para ti mismo.
