This guide will show you how to create a smooth fade-in animation with a customizable delay that works across all browsers, including Safari.

Elementor, Websites

How to Add a Delay Animation to Elementor Containers: Cross-Browser Solution

Elementor, Websites

This guide will show you how to create a smooth fade-in animation with a customizable delay that works across all browsers, including Safari.

When building websites with Elementor, you might want to add a subtle delay to your content containers, whether they contain videos, images, or other elements.

The Solution

First, you’ll need to add a custom CSS class to your Elementor container. Here’s how:

Select your Elementor container
Go to the Advanced tab
In the CSS Classes field, add: delayed-container

Then, add this CSS code to your website (Elementor → Custom CSS or your theme’s custom CSS section):

				
					.delayed-container {
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    animation: fadeIn 1s;
    
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    
    opacity: 0;
    
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

Customization Options

To adjust the delay time, modify the animation-delay value. For example, for a 2-second delay, change all instances of 1s in the delay properties to 2s:

				
					-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;

To adjust the fade-in duration, modify the animation duration value. For example, for a slower 2-second fade-in:

				
					-webkit-animation: fadeIn 2s;
-moz-animation: fadeIn 2s;
-o-animation: fadeIn 2s;
animation: fadeIn 2s;

Practical Example

Let’s say you have a video background section in Elementor:

Create a new section in Elementor
Add a background video to the section
Go to Advanced → CSS Classes
Add delayed-container
Add the CSS code provided above to your website’s custom CSS
Preview the page – you’ll see the section fade in smoothly after a 1-second delay

Browser Compatibility

This solution works across all major browsers:

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera

The vendor prefixes (-webkit-, -moz-, -o-) ensure compatibility with older browser versions as well.

Performance Note

The animation is lightweight and won’t impact your page’s performance. The animation-fill-mode: forwards property ensures that the element stays visible after the animation completes, preventing any flickering or unwanted behavior.

You can apply this same technique to any Elementor container, whether it contains videos, images, text, or other elements. The animation will work smoothly across all content types.