Animate.css: Delay Animation

[khalid-talakshi]

How to delay an animation?

[chowmean]

You can do it by using addClass method of javascript on the run.

setTimeout(function(){
var element = document.getElementById("div_to_animate");
element.classList.add("animateClass");
}, 2000);

[EddyVerbruggen]

I wanted to add it via css so created these classes:

.animation-delay-100 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.animation-delay-200 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

And added those to the animated elements like this to make them fly in classy from the left:

<h1 class="animated fadeInLeft animation-delay-100">Title</h1>
<p class="animated fadeInLeft animation-delay-200">Subtitle</p>

Perhaps it would be useful to have a similar list of predefined animation delays in the library?