CSS: How to make a cool border animation

This content originally appeared on DEV Community and was authored by DevLorenz0

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;

Enter fullscreen mode Exit fullscreen mode

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;
  }
}

Enter fullscreen mode Exit fullscreen mode

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);
  }
}

Enter fullscreen mode Exit fullscreen mode

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

This content originally appeared on DEV Community and was authored by DevLorenz0

Print Share Comment Cite Upload Translate Updates

APA

DevLorenz0 | Sciencx (2021-02-10T07:22:22+00:00) CSS: How to make a cool border animation. Retrieved from https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/

MLA

" » CSS: How to make a cool border animation." DevLorenz0 | Sciencx - Wednesday February 10, 2021, https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/

HARVARD

DevLorenz0 | Sciencx Wednesday February 10, 2021 » CSS: How to make a cool border animation., viewed ,<https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/>

VANCOUVER

DevLorenz0 | Sciencx - » CSS: How to make a cool border animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/

CHICAGO

" » CSS: How to make a cool border animation." DevLorenz0 | Sciencx - Accessed . https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/

IEEE

" » CSS: How to make a cool border animation." DevLorenz0 | Sciencx [Online]. Available: https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/. [Accessed: ]

rf:citation

» CSS: How to make a cool border animation | DevLorenz0 | Sciencx | https://www.scien.cx/2021/02/10/css-how-to-make-a-cool-border-animation/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts