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

Question

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 class="circle-wrapper">
<div class="circle-module"> </div>
</div>

Answer 1

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 class="circle-wrapper">
<div class="circle-module"> </div>
</div>

Answer 2

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 class="circle-wrapper">
<div class="circle-module"> </div>
</div>