How to Fix Elementor’s Over-the-Top Entry Animations with Simple CSS Tweaks

Elementor is one of the most popular page builders in the WordPress ecosystem, offering users a powerful drag-and-drop interface to build professional websites without touching code. Among its many features is Entry Animation, which animates sections or elements as they come into view on scroll.

But here’s the issue:
While these animations are meant to enhance the user experience, many of them start too far away from the viewport and end up looking overdone and unpolished. Instead of a subtle fade or slide, you’re met with exaggerated swoops from extreme off-screen positions — something that can feel jarring and unprofessional, especially on corporate or minimalist designs.

Thankfully, there’s a quick CSS fix that can make your Elementor animations feel smooth, elegant, and intentional.

🎯 The Problem with Default Elementor Animations

Let’s say you use Elementor’s built-in animation like fadeInUp or fadeInLeft. Here’s what happens:

• The element animates in from a very large distance (often over 100px).

• This large movement often feels excessive.

• Instead of feeling smooth, it creates a “bounce in from nowhere” effect.

This is especially problematic on mobile, where these dramatic transitions can disrupt readability and flow.

🛠️ The Fix: Add Custom CSS for Smoother Entry Animations

To fix this, we’ll override Elementor’s default keyframe animations with more subtle transitions.

🔧 Step-by-Step Guide:

1. Login to Your WordPress Dashboard

Go to your WordPress admin panel by visiting:

2. Open the Customizer

Navigate to:

Appearance > Customize > Additional CSS

This is where you’ll inject the CSS code to override Elementor’s default animation behavior.

3. Paste the Following Custom CSS

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -30px, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-30px, 0, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(20px, 0, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}