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" >
<!-- 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:
¡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/
