¿En mi lista de lavandería de todos los artículos que haré algún día? es la idea de crear una biblioteca precompilada de animaciones CSS útiles. La mala noticia es que probablemente nunca llegue a hacer esto. La buena noticia es que el desarrollador Dan Eden me ganó.
Hoy vamos a ver Animate.css, una colección impresionante y gratuita de animaciones CSS que puedes aplicar a tus proyectos casi sin esfuerzo. Es una maravilla para jugar, así que sigue y únete a la diversión.
¿Qué es animate.css?
No hay nada innovador ni especial en la forma en que se construye Animate.css, si sabes cómo usar CSS, entonces sabes cómo usarlo. Es simplemente un montón de animaciones de fotogramas clave predefinidas en algunas clases. Si desea utilizar una de las animaciones, aplique la clase. ¡Eso es!
Si estas fueran todas transiciones extremadamente simples, esta utilidad podría no valer su tiempo. Sin embargo, estas son animaciones complejas, cuidadosamente construidas que son completamente personalizables. Si está buscando utilizar fotogramas clave en cualquier nivel, Animate.css podría ahorrarle mucho tiempo.
No quiero clases apestosas
El mínimo de la policía está listo para arrestar en este momento. ¿Quién quiere ir saturando su HTML con un montón de clases extra? Para los fines de este tutorial, nos limitaremos a este método, pero si no lo aprueba, es muy fácil simplemente copiar y pegar el código de una animación en un enlace semántico.
Además, al final de este artículo, te mostraré una ruta alternativa que te permitirá eliminar el margen de beneficio adicional mediante el uso de nuestro buen amigo Sass @extend.
Creación de una construcción personalizada
Tienes dos opciones para descargar Animate.css. Puedes tomarlo todo desde Github (bueno para experimentar) o crear una descarga personalizada que solo incluya los efectos que necesitas para el proyecto específico en el que estás trabajando (bueno para uso real).
Una sugerencia ordenada en la página de compilación personalizada, intente deslizarse sobre cada etiqueta de animación. Le mostrará exactamente lo que hace la animación para que pueda decidir si incluirla o no.
La descarga
Si eliges descargar todo como lo hice yo, obtienes un archivo CSS grande que contiene todas las clases de animación y una carpeta llena de archivos CSS individuales, cada uno con una animación.
Puede seleccionar fácilmente un archivo CSS específico si solo desea aplicar una sola animación, pero tenga en cuenta que no se mantendrá por sí solo. Como veremos, hay un? Animado? Clase en el archivo grande que necesitarás para que todo funcione.
Construyendo una demostración rápida
Ahora que hemos descargado nuestros archivos, es hora de averiguar cómo usar este chico malo. Aunque necesitaremos algo para probarlo, así que vamos a construir una galería de imágenes rápida. No tiene que esforzarse al máximo, solo lance algunas imágenes a un div, aplíquelas un poco y desplácelas hacia la izquierda.
HTML
No vayas realmente loco
El consejo anterior es principalmente para fines de prueba. Cuando estés pateando los neumáticos de Animate.css, anímate a cavar y probar todo. Sin embargo, si planea implementar esto en un flujo de trabajo real, hay mucho que tener en cuenta.
Primero, piensa en el soporte del navegador. Las animaciones de fotogramas clave finalmente son compatibles con IE 10, pero nada más bajo. Sin embargo, según CanIUse, funcionan bien en casi todo lo demás: Safari, Chrome, Firefox, Opera e incluso algunos navegadores móviles como los de Android e iOS. Dada la falta de compatibilidad con IE, mantenga sus animaciones estrictamente en la categoría de caramelos y no confíe en ellas para estructurar sus interacciones o dejará fuera a muchos usuarios.
A continuación, considere el hecho de que las animaciones de fotogramas clave pueden ser acciones bastante pesadas que realmente atascan la experiencia del usuario si va demasiado lejos. Use cierta moderación y realice muchas pruebas para ver cómo funciona la página en diferentes plataformas.
Mezclando Con Sass
Mirando por encima de Animate.css tengo ganas de volver a escribir todo el asunto en Sass. No puedo evitar pensar en lo mucho más conciso y fácilmente implementable que sería utilizar la magia de los preprocesadores. La biblioteca completa podría construirse de manera similar a Compass, haciendo que la implementación de un efecto sea tan fácil como llamar a una mezcla.
Mientras tanto, dado que Sass se combina perfectamente con el CSS simple, aún puedes darte un buen impulso de funcionalidad sin reescribir nada. La clave aquí es aplicar las animaciones usando @extend, lo que elimina la necesidad de implementar clases adicionales en su marca. Considera lo siguiente:
Aquí he creado un par de clases de botones simples y he aprovechado el poder de Sass para rebotar sobre ellas. El resultado será DRY CSS vacío de repetición. Creo que Sass es fantástico para este tipo de cosas, realmente muestra la utilidad de los preprocesadores.
¿Qué piensas?
Me divertí mucho jugando con Animate.css. No estoy seguro de cuánto lo usaré en la naturaleza, pero estoy muy agradecido de que Dan Eden se tomara el tiempo para armarlo y ofrecerlo gratis.
Deja un comentario abajo y déjanos saber lo que piensas.¿Te sorprende lo lejos que se ha aventurado CSS en el territorio de las cosas para las que solíamos usar jQuery? ¿Es esta una buena idea o deberíamos dejar cosas como esta a JavaScript? Me encantaría escuchar tus opiniones.