Animate CSS :: Implementando animaciones

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!