CSS: Border animations that can make your sites more professional and good looking

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.

Live preview:

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).