Estamos en una especie de edad de oro para las animaciones web en este momento. No solo las animaciones y transiciones CSS son compatibles con todos los principales navegadores, sino que las herramientas que usamos para crearlas se están volviendo realmente poderosas. Podemos controlar cómo funcionan nuestras animaciones en un grado muy fino, lo que puede ayudarnos a dar vida a nuestros sitios y darles un carácter propio.
Por supuesto, puede abusar de las animaciones, de eso no hay duda. Pero dado que las geniales animaciones CSS pueden llamar la atención, mejorar la usabilidad y simplemente hacer que su sitio sea más divertido, creo que es justo decir que también puede utilizarlas.
Entonces, aquí están 10 geniales animaciones CSS puede utilizar en su sitio. Para algunos de estos, he presentado algunas opciones diferentes, para que pueda elegir la que sea mejor para usted. También es una gran experiencia de aprendizaje mirar el CSS de otras personas para ver cómo crearon sus animaciones.
¡Vamos a empezar!
1) Botones que se mueven para llamar la atención de las personas
No caiga en la trampa de pensar que la animación está ahí solo para crear efectos visuales agradables.
Por supuesto, ¡puedes usarlos solo por estética si quieres! Pero las animaciones también pueden tener usos funcionales importantes. Por ejemplo, para llamar la atención del visitante hacia las partes del sitio que le gustaría que miraran. Una manera simple, pero muy efectiva de hacerlo, es hacer que los elementos se muevan ligeramente, como se muestra aquí:
Esto simplemente usa transform: rotateZ() con @keyframes para crear estos movimientos. Es posible que desee poner una pequeña pausa en la animación, de modo que se mueva cada 5 segundos más o menos, en lugar de estar en un bucle infinito.
2) Animaciones de desplazamiento CSS para botones
Un uso muy común de las animaciones es indicar cuando un usuario se ha desplazado o se ha centrado en un elemento.
Esto es excelente desde la perspectiva de la interfaz de usuario porque ayuda al usuario a saber dónde está y también ayuda a indicar qué partes de su sitio son interactivas, ya que los elementos que responden a su mouse generalmente lo son.
Además de eso, ¡es divertido tener una página que te reaccione! Si desea una forma realmente genial de animar sus botones CSS al pasar el mouse, consulte algunas de estas ideas:
¿Nada te llama la atención? ¿Qué tal algunos de estos?
¿Aún no has encontrado nada? OK, ¡eres bastante difícil de complacer! ¿Qué tal este efecto degradado animado?
La forma en que esto se ha hecho también es bastante inteligente. El degradado es más grande que el elemento que lo contiene y se mueve con la posición de fondo. El efecto de neón se logró con el filtro: desenfoque() – tenga en cuenta que los efectos de filtro CSS pueden causar un impacto en el rendimiento, por lo que si le preocupa eso, simplemente elimine la propiedad de filtro – todavía se ve bien sin el desenfoque, e incluso podría lo prefiero así.
3) Animaciones de carga CSS
Como desarrolladores, tratamos de minimizar al máximo el tiempo de espera de nuestros visitantes. Optimizamos nuestras imágenes, usamos carga diferida, tal vez incluso usamos un CDN. Pero a veces, un poco de tiempo de carga es inevitable. De hecho, si nos conectamos a API de terceros, entonces parte de nuestro tiempo de carga estará completamente fuera de nuestras manos.
En estos casos, es crucial que el usuario sepa que algo está sucediendo. ¿Alguna vez ha hecho clic en el botón “Enviar” y la página se queda allí, sin hacer nada? Es un poco provocador de ansiedad, ¿no? ¿Se está cargando la página? ¿No lo es? ¿Debo hacer clic de nuevo? ¡Argh!
Por lo tanto, debemos darle al visitante una indicación de que se está procesando algo, y una de las formas más sencillas de hacerlo es con la clásica animación de carga de CSS hecha de puntos:
La ventaja clave de esto es que es barato, en cuanto a rendimiento. No ralentizará el navegador durante un momento en el que probablemente tenga otras cosas que hacer. Además de eso, es fácil de entender: todo el mundo sabe lo que esto significa.
Si desea probar algo un poco más elegante que la animación de carga CSS estándar con puntos, consulte algunas de estas opciones:
Nota: si puede medir cuánto del proceso/descarga se ha completado, podría considerar usar una barra de progreso CSS en su lugar. Consulte nuestro artículo sobre cómo hacer una barra de progreso CSS para obtener más información o este con más de 20 excelentes barras de progreso animadas.
El icono de hamburguesa de tres líneas se ha convertido en la forma estándar de indicar que un usuario puede acceder a un menú. Haces clic en la hamburguesa y se abre el menú. Entonces la hamburguesa se convierte en una “X”, que la gente puede usar para cerrar el menú.
Hay una razón por la que esta es una práctica estándar ahora: todos saben lo que significa, ocupa menos espacio que escribir “Menú” en el texto y, por supuesto, ¡le brinda una gran oportunidad de usar algunas animaciones CSS geniales!
Echa un vistazo a algunas de estas opciones:
¿Cuál crees que funcionaría mejor en tu sitio?
Por supuesto, cuando alguien hace clic en esa hamburguesa, también debe hacer que aparezca el menú, que es otro buen momento para usar algunas animaciones CSS geniales. La opción clásica, y totalmente decente, es hacer que el menú se deslice hacia adentro desde un lado:
Esto funcionará perfectamente para la mayoría de las situaciones. Pero, puedes ponerte un poco más elegante si quieres…
¿Tiene algún CSS modal o ventanas emergentes en su sitio? ¿Tal vez para un formulario de registro de correo electrónico, contenido incrustado o parte de su proceso de pago?
Si lo hace, es hora de dejar atrás el viejo y cansado desvanecimiento. ¡Hay mucho más que puedes hacer con tus modales! Pruebe una de estas increíbles ideas en su lugar:
Por cierto, incluso si no usa ventanas emergentes modales de CSS en su sitio, debe verificar la opción “Bond” a continuación. Es increíble, ¡tanto cómo aparece como cómo desaparece!
Las animaciones de texto CSS ciertamente no son algo que desee usar en exceso. La gente no espera que el texto se mueva, por lo que si se mueve demasiado, puede ser un poco abrumador.
Sin embargo, si se usan con moderación, las animaciones de texto de desplazamiento pueden ser una forma divertida de atraer la atención de los usuarios hacia un encabezado, eslogan o llamado a la acción en particular en su sitio.
Eche un vistazo a estas excelentes opciones, por ejemplo:
O si quieres ponerte realmente llamativo…
8) 404 páginas animadas
Su página 404 personalizada es la oportunidad perfecta para sacar todos sus geniales trucos de animación CSS de la bolsa. No hay nada que su usuario pueda hacer aquí, excepto darse cuenta de que no se encontró la página que buscaba y luego regresar o pasar a otra parte de su sitio. Entonces, ¿por qué no darles algo para sonreír mientras están allí?
Esta animación perdida en el espacio es muy linda y se relaciona muy bien con lo que el usuario está pasando en ese momento:
O si quieres un look divertido y un poco retro, tal vez este:
Si su marca no es tan divertida como sugieren estas opciones, ¿qué tal algunos hexágonos que flotan suavemente? Esto sería genial para un sitio de tecnología o ciencia. ¡Nada dice “Ciencia” como los hexágonos!
9) Imágenes SVG que se dibujan a sí mismas
Echa un vistazo a esta impresionante animación del mono a continuación:
Bastante genial, ¿no? Lo que es aún más genial es que esta imagen es un SVG, por lo que está definida en el código HTML. Eso significa que puede tomar cualquier ruta SVG (la propiedad d en el elemento de la ruta), conectarla a este código y su forma se dibujará sola, ¡tal como lo está haciendo el mono aquí! Por ejemplo, intentémoslo con un triángulo simple:
¿Ves lo que quiero decir?
Esta podría ser una manera genial de mostrar una firma en la pantalla. O bien, la imagen del mono u otra animación más compleja funcionaría muy bien como imagen de carga o en una página 404.
10) Formularios CSS animados
¡Asegúrate de darle estilo a tus formularios! ¡No hay nada peor que ver un formulario web con estilos predeterminados aplicados!
Bueno, está bien, tal vez haya algunas cosas peores que eso, como la guerra, el hambre y la pizza con piña. Pero entiende mi punto: asegúrese de que sus formularios se vean tan bien como el resto de su sitio.
Y mientras haces eso, ¿por qué no agregar algunas animaciones CSS geniales allí también? Es posible hacer esto de una manera elegante que no distraiga demasiado a sus visitantes. Por ejemplo, ¿qué tal esta idea?:
Si prefiere mantener un borde completo alrededor de sus cuadros de entrada, es posible que prefiera la opción a continuación. Me encanta cómo el encabezado se mueve fuera del cuadro de entrada cuando haces clic dentro de él:
¡Hora de empezar!
¡Uf! ¡Cubrimos mucho terreno allí! Pero espero que tengas algunos ejemplos útiles de animaciones CSS geniales para usar en tu sitio, o al menos algo de inspiración.
Por supuesto, tomará un poco de tiempo modificar e integrar estas ideas en su sitio. ¿Qué pasa si no tiene tiempo para todo eso? ¿Qué sucede si solo desea una solución plug and play lista para usar que pueda comenzar a funcionar de inmediato?
Si eso suena como usted, entonces le encantará fullPage.js. fullPage lo ayuda a configurar sitios de página completa de aspecto fantástico y le brinda acceso a un conjunto de diferentes animaciones y transiciones que funcionan de inmediato.
Es increíblemente rápido, fácil de configurar, y si ya está utilizando un marco JS como React o un CMS como WordPress, no se preocupe: fullPage funcionará a la perfección con su configuración existente.
¡Eche un vistazo a lo que fullPage.js puede hacer por usted!
Artículos relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
