CODEWITHSUNDEEP
javascriptcss
Toni Romero
Toni Romero

Reputation: 11

Execute elements one after another after page load

I'm working with animate.css - https://daneden.me/animate/ and I was wondering if it was possible to have multiple elements use the CSS animations and execute one after another on page load.

These are the three different elements I want to use:

<img src="flowers.png" data-test="bounceInDown" class="animated bounceInDown" />
<img src="dog.png" data-test="bounceInDown" class="animated bounceInDown" />
<img src="speechbubble.png" data-test="bounceInDown" class="animated bounceInDown" />

I just need help executing the animations one after another on page-load.

Thank You.

Upvotes: 0

Views: 201

Answers (1)

Dryden Long
Dryden Long

Reputation: 10180

If you want to stick with just CSS, you can use the animation-delay sub-property to time them out... add another class to your img tags then add the following CSS before the original CSS for the animation:

img.class1{
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}
img.class2{
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}
img.class3{
    animation-delay: 9s;
    -webkit-animation-delay: 9s;
}

You'll have to do a little bit of back and forth testing to get the timing down right, but it shouldn't be too complicated. Here is a fiddle of animation-delay in action: http://jsfiddle.net/Ny4XH/

Upvotes: 2

Related Questions