Repeat animation every 5 seconds using Animate.css

Question

Let's say I have this HTML:

<a id="btn-shake" class="animated shake" href="#">CONTINUE</a>

and this CSS:

a#btn-shake {
    width: 200px;
    height: 40px;
    clear: both;
    display: inline-block;
    margin: 0px auto;

    animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;

    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

and I want to repeat this shaking animation, but not continuously. I want to shake it once and than wait for 5 seconds and shake it again and then wait for 5 seconds and shake etc.

But I don't know how to do that.

Is it possible with animate.css and pure css? How to do that?

Answer 1

One way to achieve this would be to build the delay into the animation itself. Something like the following:

a#btn-shake {
    width: 200px;
    height: 40px;
    clear: both;
    display: inline-block;
    margin: 0px auto;

    animation-name: shake-with-delay;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

@keyframes shake-with-delay {
    from, 16%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    1.6%, 4.8%, 8%, 11.2%, 14.4% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    3.2%, 6.4%, 9.6%, 12.8% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

The biggest downside of this approach is that the percentages are closely coupled to the durations you want to implement.

Alternately, if you’re OK with a JavaScript solution, you could do something like the following:

function doAnimation(id, animName, duration, delay) {
    var el = document.getElementById(id);
    var timer;
    function addClass() {
        el.classList.add(animName);
    }
    function removeClass() {
        el.classList.remove(animName);
    }
    setInterval(function () {
        clearTimeout(timer);
        addClass();
        timer = setTimeout(removeClass, duration);
    }, duration + delay);
}

doAnimation('btn-shake', 'shake', 1000, 5000);

The advantage of the JS solution is that you can control any of the animations from animate.css independently and easily change the durations.