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!
