Repeat animation every 5 seconds using Animate.css -

let's have html:

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

and 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 want repeat shaking animation, not continuously. want shake once , wait 5 seconds , shake again , wait 5 seconds , shake etc.

but don't know how that.

is possible animate.css , pure css? how that?

one way achieve build delay animation itself. 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%, {         -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 approach percentages closely coupled durations want implement.

alternately, if you’re ok javascript solution, 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 js solution can control of animations animate.css independently , change durations.