How I delayed/timed Animate.css animations

You guys have seen the effect before — where something fades in and something else fades in a few seconds afterwards, like this site.

I thought it was cool so I tried to replicate is using Dan Eden’s Animate.css (didn’t really want to spend time writing my own animations). So I searched the web and tried to find ways of doing it. Here’s how I did it in the end.

Starting of with some simple HTML.

<div class="first">
    Fades in FIRST
</div>
<div class="second">
    Fades in SECOND
</div>  

I’m only using the FadeInUp animation so I only took that part of the code (I also took out the -o-prefix).

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
} 100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}

100% {
opacity: 1;
-moz-transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
animation-name: fadeInUp;
}

Don’t forget the jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

The standard javascript setTimeout function seemed to work well. I did try delay() but that had no effect. FYI 1000 = 1 second.

$('.first').addClass('animated fadeInUp');

setTimeout(function () {
    $('.second').show().addClass('animated fadeInUp');}, 1500
);

And finally we need to add a style=”display:none” to the second class or it will flash in.

<div class="first">
    Fades in FIRST
</div>
<div class="second" style="display:none">
    Fades in SECOND
</div>

That’s pretty much it. Hope it helped. Let me know if you end up using this method or find a better one.

Related protips:

jQuery: When to use $(document).ready() and when $(window).load()