How to animate anything in Elementor (Shape Divider)

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.