In Elementor, learn how to animate anything.

EncodeByte

Using keyframes makes animating anything in Elementor a breeze! I’ll teach you how to use keyframes to provide great motion to all shape dividers.

Copy the code and paste it into your theme’s Custom CSS or Elementor.

Remember, this code only applies to the bottom shape dividers. To be more particular, change the following 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;
   }
 }  

Have fun animating!

Share This Article
Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *