Toca el turno de mostrar otra pequeña librería css que nos ayudará a animar nuestros componentes de una forma muy sencilla, Animate CSS. Podemos encontrar alrededor de 70 animaciones que podemos utilizar fácilmente en textos, imágenes o cualquier otro elemento visual al que deseemos aplicarlo.
Veamos un poco de código:
//Animar: Añadir la clase animated y después la el nombre de la animación deseada
document.querySelector('#elemento').classList.add('animated', 'bounce');
//Cambiar animación: Debes reemplazar la clase con la animación deseada
document.querySelector('.text').classList.remove('bounce');
document.querySelector('.text').classList.add('shake');
//Animate CSS viene con una función que nos ayudará a añadir momentaneamente una sola animación:
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function () {
$(this).removeClass('animated ' + animationName);
});
}
});
//Para añadir la animación con esta función se utiliza de la siguiente forma:
$('#elemento').animateCss('bounce');
//Si queremos que la animación no pare debemos añadir la clase 'infinite'
document.querySelector('#elemento').classList.add('infinite');
También he preparado una página como demostración con las animaciones que Animate CSS incluye, la puedes encontrar en el siguiente enlace: https://www.hoclabs.com/animatecss/
La documentación oficial de Animate CSS la pueden encontrar en el siguiente enlace: https://daneden.github.io/animate.css/
Pueden encontrar los archivos de esta práctica en el repositorio del blog: https://github.com/eichgi/blog-hoclabs
Si tienen alguna duda, comentario o aclaración no duden en escribirla debajo!
