How to animate anything in Elementor (Shape Divider)

Share on facebook
Share on whatsapp
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

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
Share on xing

Leave a Reply

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