Yesterday I found this website volta.net and I liked the landing page that contained a border animation. Here's how it's look like.

I thought it would be quite difficult to implement the animation; I was thinking of creating a gradient SVG and then rotating it with Framer Motion. But after some research, I found that it can actually be done with CSS animation.

Background Animation

Well we can create an border with css but it not support animation yet, so the get that border animation we will create some container with gradient background and then give the rotate animation on it.

First let's create html container for this.

<div class="relative rounded-lg bg-animation">
    <div class="rounded-lg z-50 relative p-12">
        {Your content here!}
    </div>
</div>

Then create custom CSS with the TailwindCSS directive to set up the background in the ::after tag. This will be a fallback in case the browser does not support animation.

.bg-animation:after {
  content: "";
  --angle: 0deg;
  border-radius: 0.6rem;
  @apply absolute inset-0 z-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500
}

Now let's create CSS that will implement the animation. In this case, we will work with the angle of the gradient to get a rotating effect. So let's define the property angle.

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false
}

Now let's define keyframes for a full rotation of 360 degrees.

@keyframes rotate-animation {
  to {
      --angle: 360deg
  }
}

Using the Houdini Paint API

The Houdini Paint API is a set of web APIs that allows us to create custom CSS paint worklets. A paint worklet is a JavaScript program that can be used to paint graphics on a web page. The paint worklet is executed in a separate thread, so it does not block the main JavaScript execution thread.

You can find more information about the Houdini Paint API and other Houdini features on the following website:

https://developer.mozilla.org/en-US/docs/Web/Houdini

Now let's implement our animation using houdini API.

@supports (background: paint(houdini)) {
  .bg-animation:after {
      animation: rotate-animation 10s linear infinite;
      background: linear-gradient(var(--angle),#ec4899, #407cff,#ec4899,#6366f1);
  }
}

@supports (background: paint(houdini)) is a CSS feature query that checks if the browser supports the use of the Houdini Paint API for the background property.

Now you can use this anywhere like this use p-[2px] to set the border width.

<div class="relative rounded-lg p-[2px] bg-animation">
    <div class="rounded-lg z-50 relative bg-white dark:bg-slate-800 p-4">
        <div>
            {your content here!}
        </div>
    </div>
</div>