You must have seen this kind of “looping” animations while looking into other’s websites. Adding a certain pause to an animation is great because it doesn’t tire you up with consecutive animations and you can configure it to happen every now and then.

Learn how to add pauses to animations loops to enhance your Divi designs. Get the attention your CTAs, photos and contact forms deserves.

Pulse

0 seconds delay

Shake

3 seconds delay

Tada

5 seconds delay

Learn how to pause an animation before it loop again

There is an open source project that’s worthy to have in your favourites bookmark.

It is called WAIT! ANIMATE.

This project was made by Will Stone focused on creating time intervals between loop animations.

There are 14 different kind of preset animations to just copy and paste into your theme custom CSS.

A nice way to use this pause is by animating the arrows in the Fullwidth Header Module.

Example:

Best Pizza Restaurant in Europe

See full menu options of the best pizza you'll ever have!

To achieve this arrow animation loop above you may select:

Add pause to animation before it loop again in Divi

• Animation: Bounce;

• Wait Time: 3 seconds.

Then, create a Fullwidth Header module and add the following code into Module Settings > Custom CSS > Scroll Down Button.

 animation: bounce_1287 4.6s ease infinite;
 transform-origin: 50% 50%;

@keyframes bounce_1287 {
 0% { transform:translateY(0) }
 4.34783% { transform:translateY(0) }
 8.69565% { transform:translateY(0) }
 17.3913% { transform:translateY(-15px) }
 21.73913% { transform:translateY(0) }
 26.08696% { transform:translateY(-15px) }
 34.78261% { transform:translateY(0) }
 100% { transform:translateY(0) }
}

Conclusion

There are a plenty of good options when you add pause to animation before it loop again in Divi. You may call your user attention to a WhatsApp number, instigate a button click and more.

But, be creative and post your ideas in the comments below.

You can use this animation in images, blurbs, icons, button, and many more.

Did you know about this pause and loop animation?

Hope that this tutorial helped you somehow.

See ya!