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!
