CSS: How to make a cool border animation

Hello World! New episode of the series - A CSS/JS trick in 5 minutes.
I did an article about CSS slow border animations and I wanted to do a follow-up. I will now explain to you how to do a more engaging and advanced 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-radius: 10px;
  padding: 35px;
  width: 380px;
  overflow: hidden;
  padding: 2rem;
  animation: borderSpin 5s ease infinite;

Inside of container style, we add a :after and :before.

 &::before {
    content: "";
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

That's a lot of things, just notice that we are giving a colorful background to the container and with the animation we will make the border moving. You can play around with background size, position, colors, calc, radius...

In reality the animation part is very easy:

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

We are just rotating the background.

I have done 8 animation examples for you (open the link for a complete experience).

Live preview: - Check quick animation part

Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)

Check this article about how to write CSS like a pro!

Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!