How to animate anything in Elementor (Shape Divider)

Teile den Beitrag

Share on facebook
Share on linkedin
Share on twitter
Share on email

Animating anything in Elementor becomes super easy when using keyframes! I will show you how to add nice animation to all shape dividers with the help of keyframes.

Step1: Copy my code and paste it in the Custom CSS of your theme or inside Elementor

Keep in my mind that this code only applies to the bottom shape dividers. If you want to be more specific just manipulate this line of code:

 .elementor-shape-bottom

.elementor-shape-top

.elementor-shape
 
body {
overflow-x:hidden;
}
.elementor-shape-bottom {
bottom: -1px;
animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
width: 210%;
}
@keyframes wave {
0% {
margin-left: 0;
}
50% {
margin-left: -1600px;
}
100% {
margin-left: 0px;
}
}

Step 2: Have fun animating!

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

Subscribe To Our Newsletter

Get updates and learn from the best

Explore

Using BoxShadows effectively in Elementor

CSS’s BoxShadow is awesome. It allows us to easily cast shadows from objects and boxes, creating a three-dimensional effect. Google uses this effect extensively to

Möchten Sie Ihr Unternhemen pushen?

Schreiben Sie uns und bleiben Sie in Kontakt

small_c_popup.png

Let's have a chat

Erfahren Sie, wie wir 100 Top-Marken zum Erfolg verholfen haben.