How to make a smooth gradient transition?

Question

css

It is not possible to make a smooth transition between colors. It turns out some kind of flasher

CSS
.line{
width: 100%;
height: 20px;
bottom: 0;
background-image: linear-gradient(45deg,red,green);
animation-name: grid;
animation-timing-function: linear;
animation-duration: 5s
animation-iteration-count: 4;
}

@keyframes grid {
0%{background-image: linear-gradient(45deg,red,green)}
50%{background-image: linear-gradient(45deg,green,red)}
100%{background-image: linear- gradient(45deg,red,green)}
}

Answer 1

Gradients cannot be animated within CSS head-on. But you can make several elements with different gradients on top of each other and change their transparency:

Answer 2

Here is a list of properties that can be animated , and background-image is not among them. Those. it changes, of course, but do not expect smoothness.
Workarounds:
You can make the gradient matte larger and move it smoothly.
You can make several layers of the substrate and change their transparency.

Answer 3

It's not clear what the problem is, here is a simple code

background: linear-gradient(to right, #2f2f2f, #615f5f);