

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');