Animate.css

Vota con 5 estrellas

Tabla de contenido

1.Instalación
- 1.1.Animate css NPM
2.Uso Básico
3.Uso
4.Vea un video tutorial sobre cómo usar Animate.css con jQuery
5.Compilaciones personalizadas

Actualmente no basta tener una página con información valiosa para el usuario, sino que hay que tener una página atractiva para poder competir con otras páginas similares. Es por esto que quiero compartirles esta fabulosa librería de CSS para realizar animaciones de una forma sencilla.

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" >
<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">
<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:

Example

¡Mira todas las animaciones aquí!

Uso

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/

Sección: