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!

Comments

[GrahamTheDev]

These aren't border animations though :-P

Nice article all the same so have a 💓 from me

[Lorenzo]

Thanks 😊