Title: multiple animations on same page – diff elements
Last modified: August 24, 2016

---

# multiple animations on same page – diff elements

 *  Resolved [WPrap](https://wordpress.org/support/users/wprap/)
 * (@wprap)
 * [11 years ago](https://wordpress.org/support/topic/multiple-animations-on-same-page-diff-elements/)
 * suspect this already addressed but can’t (or more accurately – don’t know how
   to) search WP forums for only Animate It! ‘topics’.
 * have an unordered list list of 24 items … want to display 4 and delay for 20 
   secs, then fade out & up, then display next 4 for 20 secs and fade out & up,…
   for all 24.
 * First 4 OK (except – problem 2 – delay=”12″ seems the limit) but next animation
   doesn’t ‘animate’ … ever!
 * [https://wordpress.org/plugins/animate-it/](https://wordpress.org/plugins/animate-it/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [10 years, 12 months ago](https://wordpress.org/support/topic/multiple-animations-on-same-page-diff-elements/#post-5990910)
 * New version released that will allow you to add custom delay classes.
    for example–
   Go to Settings->Animate It! – Add following CSS class class for 20 seconds
 *     ```
       .delay40 {
           -webkit-animation-delay: 20s;
             -moz-animation-delay: 20s;
               -ms-animation-delay: 20s;
                 -o-animation-delay: 20s;
       }
       ```
   
 * — Save the settings. Now you have additional delay class for twenty seconds of
   delay.
 * — Add an animation block using the Animate It! button, modify delay to 40.
    The
   block should appear like this.
 *     ```
       [edsanimate animation="flip" delay="40" duration="1" infinite_animation="no" animate_on="" ]
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
   
       [/edsanimate]
       ```
   
 * Now your block will animate after 20 seconds.
 * In the same way, you can add any number of additional delay and duration classes.
 *  Thread Starter [WPrap](https://wordpress.org/support/users/wprap/)
 * (@wprap)
 * [10 years, 12 months ago](https://wordpress.org/support/topic/multiple-animations-on-same-page-diff-elements/#post-5990912)
 * Thank you for the reply

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘multiple animations on same page – diff elements’ is closed to new replies.

 * ![](https://ps.w.org/animate-it/assets/icon-256x256.png?rev=989356)
 * [Animate It!](https://wordpress.org/plugins/animate-it/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/animate-it/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/animate-it/)
 * [Active Topics](https://wordpress.org/support/plugin/animate-it/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/animate-it/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/animate-it/reviews/)

## Tags

 * [multiple](https://wordpress.org/support/topic-tag/multiple/)

 * 2 replies
 * 2 participants
 * Last reply from: [WPrap](https://wordpress.org/support/users/wprap/)
 * Last activity: [10 years, 12 months ago](https://wordpress.org/support/topic/multiple-animations-on-same-page-diff-elements/#post-5990912)
 * Status: resolved