Manual para integrar animaciones con CSS
Anímate!! Anímate!! Bum chiquibum!!! bum bum bum!!! Anímate!!! Anímate!!! Mal empezamos, yo no sé como va a acabar esto…
Intentemos reconducirlo.
Animate.css surge de un deseo de alguien muy aburrido que estaba sentado en un sillón, viendo como delante de su pantalla de ordenador pasaba el contenido de arriba a abajo (o de abajo arriba si se había quedado dormido y tenía que retroceder) de forma hierática, quieta, sosa y monótona.
¡Entonces se levantó de su sillón y comenzó a cantar!
Animate!! Animate!! Bum chiquibum!!! bum bum bum!!! Anímate!!! Anímate!!! Moviendo el esqueleto a tope y sin parar de cantar salio a la calle pidiendo a todo y a todos que se animaran. Aquello salió en las noticias a nivel internacional y programadores de todo el mundo se animaron y empezaron a crear animaciones para las páginas webs.
Vale, lo reconozco, no he reconducido nada. Además, casi con total seguridad, si os documentáis no sea este el origen de las animaciones en las páginas web, pero ¿decidme que no hubiese molado?
La cuestión es que este señor, Daniel Eden, ha decidido facilitarnos la vida a todos creando una serie de estilos css que da animaciones a nuestras webs. En mi universo paralelo él fue el primero en ver a este señor cantando por la calle.
Estas animaciones que hacen las webs molonas y divertidas las podéis encontrar aquí.
En el enlace a Github podréis encontrar las instrucciones de instalación y uso que yo os voy a explicar más abajo. No obstante yo os lo he traducido y le he metido mi propio animate.css en forma de “tontunadas” varias.
Instalación
Para instalar vía bower, simplemente haz lo siguiente (Nota mental, en próximos capítulos escribir sobre el magnífico mundo de bower):
$ bower install animate.css --save
O puedes instalarlo via npm:
$ npm install animate.css --save
Uso básico
Incluye la hoja de estilos en el <head> . Ahora dirás ¿dónde si no? ¿Es que acaso no pensamos con la cabeza? Pues no, si leyeses más y no estuvieses todo el día con la maquinita sabrías que el pensamiento es algo que nos viene de fuera, indeterminado… o esa, es la “tontunada” que decía Nietzsche.
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
O usa 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>
Añade la clase animated al elemento que tu quieras animar. Si quieres que la animación se repita de forma infinita añade la clase infinite.
Por último sólo necesitas añadir una de las siguientes clases, dependiendo de la animación que quieras:
- 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
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Puedes encontrar un ejemplo completo:
<h1 class="animated infinite bounce">Example</h1>
Check out all the animations here!
Uso avanzado
Se pueden hacer un montón de cosas con animate.css cuando lo combinas con jQuery o añadiendo tus propias reglas CSS.¿Cómo? Pues muy fácil:
$('#yourElement').addClass('animated bounceOutLeft');
También puedes detectar fácilmente cuando termina una animación:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
Ver un vídeotutorial sobre cómo usar Animate.css con jQuery aquí
Note: jQuery.one() se utiliza cuando se desea ejecutar el controlador de eventos como máximo una vez. Más información aquí.
También puede extender JQuery para añadir una función que hace todo por ti:
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
Y usarla de este modo:
$('#yourElement').animateCss('bounce');
Y, por último, también puedes cambiar la duración de las animaciones, añadiendo un retraso en la animación o cambiando el numero de veces que ocurra.
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
Nota: Asegurate de remplazar "vendor" en el CSS con el vendor prefixes appllicable (webkit, moz, etc).
Por cierto, no quiero terminar sin hacer referencia a otras dos librerías que también tratan este tema. Una de ellas es GroundworkCSS 2. Esta librería contiene la anterior que os he explicado. No obstante, incluye algunas animaciones más así como todo un sistema de grilla, tratamiento de fuentes, iconos y mucho más. Os recomiendo echarle un vistazo porque os puede solucionar muchas cosas. Aunque si vais a utilizar sólo las animaciones tirad de la primera que he puesto.
Por otro lado, está esta otra: Story Box. Si necesitas que las animaciones dependan del scroll de la página, es tu librería. Soy consciente de que existen millones de plugins, pero este me gusta por su sencillez, eficacia, eficiencia y… ¿Acaso no es eso lo que nos piden todos los jefes?
¿A que mola esto de las animaciones? Mi próxima web tendrá un botón que esquive el puntero del ratón y no haya forma de hacer click jejeje
¿Que te atreves a hacer tu? Vamos animate!!
Animate!! Animate!! Bum chiquibum!!! bum bum bum!!! Anímate!!! Anímate!!!
