nuzcua
Last Updated: February 25, 2016
·
30.97K
· ceiga

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.

6 Responses
Add your response

13660
4cce75235eb2afe82860fde54b6337fa

Thanks

over 1 year ago ·
14952
C3b3f7d68b3b7ac9e6f86b4e640a2685 normal

Excellent! Thank You!

over 1 year ago ·
15670
0 srapvxqr9ib4kth1d 07vp3ov5 hrbm1inv vpqflq64fimp39orry 3qdtcp8z0u12gsuz5tw0v

Thanks, I have been searching for this for quite some time now.

over 1 year ago ·
15678

Awesome, glad my article helped you out.

over 1 year ago ·
17585
369175 100001809681252 1964508251 n normal

You can also do it easily using css3 animation-delay property like that :
.first{

animation-delay:0.3s;

}
.second{

animation-delay:0.6s;

}

over 1 year ago ·
20778
Yvabic1n normal

Hi, how to delay between each animate by using css syntax ? I've just found the solution by using javascript settimeout function

over 1 year ago ·