If you didn’t know, Elegant Themes’ Divi theme is one of my favorite WordPress themes to use, especially for sites that need a quick turnaround time. I recently built a website where they asked for a delay in the appearance of a set of blurbs, so that it would appear as a process. So if you had four blurbs, the first blurb’s image would show, then the second blurb’s image would appear, and so on. If you have four blurb modules in a row currently in Divi, their images would show all at the same time. How do you make it so the animation is delayed?

I scoured the Elegant Themes’ forums for an answer, and all of them said:

Add a custom class to the blurb and add animation-delay to your CSS

I added new classes to the blurbs I wanted delayed. I assigned my 2nd blurb to have “blurb2” as the class, 3rd blurb had “blurb3”, and 4th blurb had “blurb4”. I added animation-delay into the CSS and… it didn’t work. There were issues. For blurbs #2-4, their animations were definitely delayed, but their images were being displayed on page load. I wanted the images to be invisible until the animation was triggered.

Adding opacity: 0 should help with the visibility issue, right? Not so:

The animation performs correctly, but then the images disappear entirely.

The Answer

The answer to this conundrum is a combination of animation-delay, opacity: 0 AND animation-fill-mode: forwards. Here’s my CSS:

.blurb2 .et_pb_animation_bottom.et-animated {
	opacity: 0;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}
.blurb3 .et_pb_animation_bottom.et-animated {
	opacity: 0;
	animation-delay: 4s;
	animation-fill-mode: forwards;	

}
.blurb4 .et_pb_animation_bottom.et-animated {
	opacity: 0;
	animation-delay: 6s;
	animation-fill-mode: forwards;
}

 

And here’s how it performs:

It’s amazing how one CSS rule can have such an effect!