How do I make this animation smoother in CSS?-CodePudding

I'm a novice to web development, and I'd like to make a circle rotate the orientation of its linear gradient smoothly, but there is a jump in between each orientation.

I expected it to be smooth, since I used steps and set the animation-timing-function to linear, but there is a jump in between each step of the animation.

I'm not quite sure how to display the code here, if anyone has any tips for a beginner I would appreciate it.

Edit: Here is the code :)

/* The animation: */

@keyframes gradientShift {

    0% {background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));}

    25% {background-image: linear-gradient(rgb(0, 4, 255), rgb(0, 162, 255));}

    50% {background-image: linear-gradient(to right, rgb(0, 162, 255), rgb(0, 4, 255));}

    75% {background-image: linear-gradient(rgb(0, 162, 255), rgb(0, 4, 255));}

    100% {background: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));}

}

/* The other styles*/
.circle-wrapper {
    background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));

    animation: gradientShift;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    margin-top: 28vh;
    width: 12vh;
    height: 12vh;
    margin-left: 35vh;
    border-radius: 100px;
    position: absolute;
    padding: 3px;
    z-index: 1000;
}

        <div >
            <div >&nbsp;</div>
        </div>

CodePudding user response：

That is because CSS cannot handle transitions in background images. Basically your CSS animation is "stepped" and will have 5 distinct frames with no interpolation in between.

Seeing that you are only rotating the angle of the gradient and not performing and color changes, you can simply set the linear-gradient on a pseudo-element and rotate it instead:

/* The animation: */

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
        transform: rotate(360deg);
  }
}


/* The other styles*/

.circle-wrapper {
  margin-top: 28vh;
  width: 12vh;
  height: 12vh;
  margin-left: 35vh;
  border-radius: 100px;
  position: absolute;
  padding: 3px;
  z-index: 1000;
  overflow: hidden;
}

.circle-wrapper::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
  animation: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  content: '';
}

.circle-wrapper>* {
  position: relative;
}

<div >
  <div >&nbsp;</div>
</div>

CodePudding user response：

There is no way in css to animate the background-image property.

You see the CSS Animated Properties to know what are the animatable css properties.

But it still possible with javascript, you can use setInterval() with a very small amount of time to change your rotation degree:

let circle = document.getElementsByClassName("circle-wrapper")[0]
let rotateDeg = 0
setInterval(function() {
    circle.style.backgroundImage = "linear-gradient("     rotateDeg   "deg, rgb(0, 4, 255), rgb(0, 162, 255))"
}, 2000/360)

.circle-wrapper {
    background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
    margin-top: 28vh;
    width: 12vh;
    height: 12vh;
    margin-left: 35vh;
    border-radius: 100px;
    position: absolute;
    padding: 3px;
    z-index: 1000;
}

<div >
  <div >&nbsp;</div>
</div>