Question 44471 in Html Question posted in
Some basic documentation can be found here.

Can I animate the background to rotate instead of the element? – Html

I created a box with a gradient border, and I’d like to animate that gradient so it’s doing a 360 rotation.

With the code I’m currently working on, instead of the gradient background itself rotating, the actual box is rotating. Fun, but not the result I was going for. haha Any suggestions on how I can fix this? Here’s my current code:

.gradient-border {
  position: relative;
  width: 500px;
  height: 500px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px; 
  border: 7px solid transparent;
  background: linear-gradient(45deg, #4158D0, #C850C0, #FFCC70) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: rotate-gradient linear 5s infinite;
}

@keyframes rotate-gradient {
  100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg);
  }
}
<div class="gradient-border"></div>

Thanks for your help!

Tags:

2

Answers


  1. 0

    Perhaps you could animate the background instead:

    @keyframes rotate-gradient {
  100% {
    /*-webkit-transform: rotate(360deg);
    transform: rotate(360deg);*/
    background: linear-gradient(85deg, #4158D0, #C850C0, #FFCC70) border-box;
  }
}

    And maybe bring down to 5s to 3s.

    .gradient-border::before {
   animation: rotate-gradient linear 3s infinite;
}
}
    Login or Signup to reply.
  2. 0

    Try with custom css properties :

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

  .gradient-border {
    --angle: 0deg;
    width: 500px;
    height: 500px;
    border: 1rem solid;
    border-image: linear-gradient(var(--angle), #4158D0, #C850C0, #FFCC70) 1;
    animation: rotate-gradient linear 2.5s infinite;
  }
  
  @keyframes rotate-gradient {
    100% {
      --angle : 360deg ;
    }
  }
    <body>
    <div class="gradient-border"></div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search