Run each element in sequence after the page has finished loading

Question

Run each element in sequence after the page has finished loading

I am currently exploring animate.css at and I am curious if it is feasible to apply CSS animations to multiple elements sequentially upon page load.

Below are the three distinct elements I aim to animate:

<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 would appreciate assistance in executing these animations one by one during page-load.

Thank you!

javascript css

Answer 1

Answer №1

To maintain using only CSS, you can utilize the animation-delay sub-property to control the timing... simply assign an additional class to your img elements and include the following CSS prior to 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;
}

A bit of trial and error may be necessary to fine-tune the timing, but it shouldn't be overly complex. You can view a demonstration of animation-delay in action on this fiddle: http://jsfiddle.net/Ny4XH/

Answer 2

To maintain using only CSS, you can utilize the animation-delay sub-property to control the timing... simply assign an additional class to your img elements and include the following CSS prior to 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;
}

A bit of trial and error may be necessary to fine-tune the timing, but it shouldn't be overly complex. You can view a demonstration of animation-delay in action on this fiddle: http://jsfiddle.net/Ny4XH/

Run each element in sequence after the page has finished loading

Answer №1

Similar questions

"Step-by-step guide on populating a select box with data from the scope

How can I implement the dynamic loading of components using the Vue 3 composition API?

Finding the smallest value for each day in MongoDB using Mongoose

Creating an Angular directive that shares a single scope while displaying multiple behaviors

How to create a captivating image effect using CSS on hover

Using SASS variables in JavaScript: A guide

Issue with fading out in Ajax.BeginForm not resolving

Is it possible to conceal a form field until a previous field has been completed?

What is the best way to incorporate a transition on transform using Styled-components?

When making a POST request from the client-side JavaScript, the req.body is coming back as an empty

Unusual escape_javascript quirk witnessed in Ruby on Rails

Styling Scrollbars in Datatables

JavaScript method of retrieving an object inside an array nested within another object via multer

JavaScript Slider for Color Selection

Is there a feature to enable a separate comment box for every tweet, similar to the toggle

Adapt the stylesheet for mobile devices using CSS

React JS functionality does not support Bootstrap tooltips

Creating a simulated textarea with a scrollbar and dynamically refreshing the content

How to extract part of a string delimited by certain characters within GET parameters?

Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?