How to replay an animation in Animate.css

Published by bruxo on

In this case, I will use the library Animate.css as an example.

Given an element you want to animate, in this case I want to animate a div element, which is:

<div class="test">QWE</div>

 

I will use this function that I made, that is the really simple trick to make the animations “replayable”.

function animate(element, animationName) {
    if ($(element).hasClass("animated")) {
        $(element).removeClass("animated");
    }

    if ($(element).hasClass(animationName)) {
        $(element).removeClass(animationName);
    }

    window.setTimeout(function () {
        $(element).addClass("animated").addClass(animationName)
    }, 1);
}

 

Now you can use the function animate when you want that the animation will be played everytime, in this case, I will apply the animation pulse to the class test.

animate(".test", "pulse");

Leave a Reply

Your email address will not be published. Required fields are marked *