Let's learn how to add this awesome border animation to any Elementor element!
To begin with, copy this code under Advanced > Custom CSS for your target element.
This will require Elementor Pro. For Elementor free users, give your Elementor a class name under Advanced, then replace 'selector' with your given class name. More information in the video!
selector.fadeIn::before { content: ''; width: 100%; height: 100%; position: absolute; z-index: -3; background-repeat: no-repeat; background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, #C9C9C9), to(#C9C9C9)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #C9C9C9), to(#C9C9C9)), -webkit-gradient(linear, left top, right top, color-stop(100%, #C9C9C9), to(#C9C9C9)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #C9C9C9), to(#C9C9C9)); background-image: -o-linear-gradient(left, #C9C9C9 100%, #C9C9C9 100%), -o-linear-gradient(top, #C9C9C9 100%, #C9C9C9 100%), -o-linear-gradient(left, #C9C9C9 100%, #C9C9C9 100%), -o-linear-gradient(top, #C9C9C9 100%, #C9C9C9 100%); background-image: linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%); background-size: 0 3px, 3px 0, 0 3px, 3px 0; background-position: 0 0, 100% 0, 100% 100%, 0 100%; -webkit-animation: bordere 2.3s cubic-bezier(0.19, 1, 0.22, 1) forwards 1.3s; animation: bordere 2.3s cubic-bezier(0.19, 1, 0.22, 1) forwards 1.3s; } @-webkit-keyframes bordere { 0% { background-size: 0 3px, 3px 0, 0 3px, 3px 0; } 25% { background-size: 100% 3px, 3px 0, 0 3px, 3px 0; } 50% { background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; } 75% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; } 100% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; } } @keyframes bordere { 0% { background-size: 0 3px, 3px 0, 0 3px, 3px 0; } 25% { background-size: 100% 3px, 3px 0, 0 3px, 3px 0; } 50% { background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; } 75% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; } 100% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; } }
Then, use a code editor to make adjustments
If you want a different styling than what is offered by default. More information about this in the video.
Finally, enjoy your awesome Elementor animated border!
Let me know if everything works for you!