Hello World!
The seventh episode of the series - A CSS/JS trick in 5 minutes.
I did an article about CSS gradient animations and I wanted to do a follow-up. In reality, I think I will do three or more. In this one, I want to explain to you how to do a slow border animation.
We do not need to excessively style our container, we just give it padding, a border, and if you want (recommended) a border-radius. You can after insert everything you need in the div (or make it act as a button):
#container {
border: 5px solid blue;
border-radius: 10px;
padding: 35px;
width: 380px;
animation: borderSpin 5s ease infinite;
}
In that part of the animation you can change duration time in seconds and type after that.
Then we have the animation:
@keyframes borderSpin {
0% {
border-color: #bdc3c7;
}
25% {
border-color: #2c3e50;
}
50% {
border-color: #c33764;
}
75% {
border-color: #1d2671;
}
90% {
border-color: #141e30;
}
100% {
border-color: #6dd5ed;
}
}
Border will slowly change color until he reaches the end. Then after a quick change, it will return to the first color. You do not absolutely need to add this much breakpoint, just three (0%, 50% and 100%) should be enough.
I did 4 different colors examples for you who can be easily copied on this codePen.
Hope this helped and thanks for reading!
Please smash that like button to make me understand that you want the series to continue :)
Remember to check this link for part 2 (more advanced and cool animations).
Top comments (0)