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