Animate.css es una herramienta de animación de código abierto que permite a los desarrolladores web agregar fácilmente efectos de animación a sus proyectos sin tener que escribir CSS o JavaScript personalizados. La herramienta contiene una colección de animaciones predefinidas listas para usar que pueden ser agregadas a cualquier elemento HTML.
Animate.css es fácil de instalar y usar. Una vez que se ha agregado la biblioteca a un proyecto web, se puede aplicar una clase de animación a un elemento HTML para agregar un efecto de animación. Las animaciones pueden ser configuradas con varios parámetros, como duración, retraso, iteraciones y dirección.
La herramienta incluye una amplia variedad de animaciones, desde simples transiciones de opacidad y rotación, hasta animaciones más complejas, como efectos de rebote, sacudidas y deformaciones. También hay animaciones especiales para elementos de interfaz de usuario comunes, como botones, menús y barras de carga.
Animate.css es compatible con una amplia variedad de navegadores y dispositivos, lo que lo hace una herramienta útil para crear proyectos web responsivos. La biblioteca también es modular, lo que significa que los desarrolladores pueden personalizar la herramienta para incluir solo las animaciones que necesitan, lo que reduce el tamaño del archivo y mejora la velocidad de carga de la página.
Aunque Animate.css es fácil de usar, es importante recordar que el exceso de animaciones puede afectar negativamente la experiencia del usuario. Es importante utilizar animaciones de manera estratégica para mejorar la navegación y la interactividad en lugar de simplemente agregar animaciones por diversión.
Instalación
Para instalar a través de Bower, simplemente haga lo siguiente:
$ bower install animate.css --save
Animate.css NPM
o puede instalar a través de npm:
$ npm instalar animate.css --save
o lo puedes descargar animate.css aquí.
Uso Básico
Incluya la hoja de estilo en su documento
<head>
<link rel = "stylesheet" href = "animate.min.css" >
</head >
Animate css CDN
En lugar de instalar, puede usar la versión remota (alojada por CDNJS):
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css" >
<!-- o -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" >
</head>
Puede generar un hash SRI de esa versión en particular y luego usarlo para asegurar la integridad del archivo; también puede realizar solicitudes anónimas a CDN configurando el crossorigin atributo correspondiente:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
crossorigin="anonymous">
<!-- or -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
integridad="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
crossorigin="anonymous" >
</head>
Agregue la clase animatedal elemento que desea animar. Es posible que también desee incluir la clase infinitepara un ciclo infinito.
Finalmente, necesita agregar una de las siguientes clases:
Class Name
- bounce
- flash
- pulse
- rubberBand
- shake
- headShake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- jackInTheBox
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Ejemplo:
<h1 class="animated infinite bounce">Example</h1>
¡Mira todas las animaciones aquí!
¿Cómo se usa Animate.css?
Para usar animate.css en su sitio web, simplemente coloque la hoja de estilo en su documento y agregue la clase animateda un elemento junto con cualquiera de los nombres de la animación. ¡Eso es! Tienes un elemento animado CSS. ¡Súper!
<head> <link rel="stylesheet" href="animate.min.css"> </head>
o use la versión alojada por CDNJS
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head>
Puedes hacer un montón de otras cosas con animate.css cuando lo combinas con jQuery o añades tus propias reglas de CSS. Agregue dinámicamente animaciones usando jQuery con facilidad:
$('#yourElement').addClass('animated bounceOutLeft');
También puedes detectar cuándo termina una animación:
// See https://github.com/daneden/animate.css/issues/644 var animationEnd = (function(el) { var animations = { animation: 'animationend', OAnimation: 'oAnimationEnd', MozAnimation: 'mozAnimationEnd', WebkitAnimation: 'webkitAnimationEnd', }; for (var t in animations) { if (el.style[t] !== undefined) { return animations[t]; } } })(document.createElement('div')); $('#yourElement').one(animationEnd, doSomething);
Vea un video tutorial sobre cómo usar Animate.css con jQuery
Nota: jQuery.one() se usa cuando desea ejecutar el controlador de eventos a lo sumo una vez. Más información aquí.
También puede extender jQuery para agregar una función que lo haga todo por usted:
$.fn.extend({ animateCss: function(animationName, callback) { var animationEnd = (function(el) { var animations = { animation: 'animationend', OAnimation: 'oAnimationEnd', MozAnimation: 'mozAnimationEnd', WebkitAnimation: 'webkitAnimationEnd', }; for (var t in animations) { if (el.style[t] !== undefined) { return animations[t]; } } })(document.createElement('div')); this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); if (typeof callback === 'function') callback(); }); return this; }, });
Y úsalo así:
$('#yourElement').animateCss('bounce'); or; $('#yourElement').animateCss('bounce', function() { // Do somthing after animation });
Puede cambiar la duración de sus animaciones, agregar un retraso o cambiar el número de veces que se reproduce:
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }
Nota: asegúrese de reemplazar "proveedor" en el CSS con los prefijos de proveedor aplicables (webkit, moz, etc.)
Compilaciones personalizadas
Animate.css funciona con gulp.js, y puedes crear compilaciones personalizadas con bastante facilidad. Antes que nada, necesitarás Gulp y todas las demás dependencias:
$ cd path/to/animate.css/ $ sudo npm install
A continuación, ejecute gulp para compilar sus compilaciones personalizadas. Por ejemplo, si solo desea algunos de los "attention seekers", simplemente edite el archivo animate-config.json para seleccionar solo las animaciones que desea usar.
"attention_seekers": { "bounce": true, "flash": false, "pulse": false, "shake": true, "headShake": true, "swing": true, "tada": true, "wobble": true, "jello":true }
Página original en inglés:
https://daneden.github.io/animate.css/
