Learn How to Create a Background Animation In Any Text or Heading Elementor

If you're tired of text or heading elements sticking out from your design, why not animate them? Using a background animation can add depth, personality and professionalism to your website. This tutorial will teach you step by step how to create a background animation in any text or heading element using Custom CSS. Once you've learned the basics, you'll be ready to create some beautiful effects for your website.

CSS is a powerful language that lets you create animations in your website. You can use CSS to animate text, headings and other elements on your site. The following tutorial will teach you the basics of how to use Custom CSS to create a background animation with elementor.

How to Use Custom CSS to Create a Background Animation

Step 1: First we will make sure the elementor is installed and activated. If not, please go to plugins and click add new and search for elementor. Install and Activate.

Step 2: Next, Go the page and edit it using elementor. Or Create a new page and edit with elementor.

For this tutorial I will create a new page with elementor and name it Tutorial.

Step 3: Once you have the edit screen in front of you, click on add section. After that you need to drag an Heading or Text editor Elementor widget.

Step 4: After that add your content there.

Step 5: Now go to style tab and edit the font styles as you wish.

Step 6: Next, we will enclose the content either text or heading with a div class.

Here for this tutorial, I will name the class as bg-wpc.

Now we will move on to the custom CSS part.

Custom CSS with Elementor

Step 7: Now go to advanced tab of the widget.

Move down to the Custom CSS field.

Add the following CSS to it.

    .bg-wpc       {       animation: moveToLeft 5s linear infinite;       animation-delay: 1000ms;      }      @keyframes moveToLeft {       0% {        transform: translateX(0px);        background: linear-gradient(         to right,         #ff8177 0%,         #ff867a 0%,         #ff8c7f 21%,         #f99185 52%,         #cf556c 78%,         #b12a5b 100%        );       }       25% {        transform: translateX(100px);        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);       }       50% {        transform: translateY(100px) translateX(100px);        background: linear-gradient(to top, #30cfd0 0%, #330867 100%);       }       75% {        transform: translateX(0px) translateY(100px);        background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);       }       100% {        transform: translateY(0px);       }      }

You'll notice above that we're using a specific class name. This is so that we can call this animation on any other text or headings element, by enclosing that element with the same class name.

In the above css snippet, I have added the moveToLeft animation which will animate it from its original position to left until it is fully gone.

The animation-delay will allow you, to set the time it takes to animate before the next animation begins.

After that I have also added another keyframe after 75% which changes the direction of movement and then resets it back again.

That's all! Save your widget and view your page! Your text or heading element should now be moving its directions and changing its background, How Cool is it?

What To Do Next

Now you have the basics of how to animate text or headings elements using Custom CSS. Once you have these under your belt, you'll be able to create some pretty cool effects for your site. Why not animate it vertically? Or even horizontally?

You can also choose what direction the element is moving in. This means that if you want to, you can make it move up or down and in different directions.

You could also add the animation to your logo which will bring a lot of attention and stand out.

Now that we know how to animate using CSS with Elementor, don't forget there are so many more things we can do with this plugin.

The Bottom Line

Elementor is a powerful and easy to use WordPress page builder plugin that gives you the ability to quickly and easily design your site, without having to write any code.

With its simple interface and easy to use drag & drop editor, Elementor allows you to create beautiful and unique web pages without hassle. You can do this with unlimited combinations of widgets and with a fully responsive design. It is packed with useful tools and effects which you can apply to your content.

And with the custom CSS tab, allowing you to enter any code you wish, the possibilities are endless.