Background image linear-gradient animate opacity smoothly - css

Question

I want to do this animation when the user goes to the page, the image changes the position and also adds a linear gradient to the image, something like this:
Video of how it should be
But this is what I have:
What I have
I just want to make the linear-gradient animation smooth... This is the code I'm using:
.bg-image {
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("Background.jpg");
background-position: 50% 100%;
animation: backgroundPosition 4s ease-in;
}
#keyframes backgroundPosition {
from {
background-image: linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
),
url("Background.jpg");
background-position: 50% 0%;
}
to {
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("Background.jpg");
background-position: 50% 100%;
}
}

Answer 1

gradients can not be animated for color, or alpha, they can only be animated for position.
Set your gray layer to a bigger dimension in horizonatl, and make it a real gradint, goping from transparent to whatever level of gray you want.
Then, animate also the horizontal position of the gradient, from the transparent side to the gray side
.bg-image {
height: 400px;
width: 400px;
background-image: linear-gradient(to right,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)
),
url("http://placekitten.com/400/800");
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: 1000% 100%, 100% 200%;
animation: backgroundPosition 4s ease-in infinite;
}
#keyframes backgroundPosition {
from {
background-position: 0% 0%, 0% 50%;
}
to {
background-position: 100% 0%, 0% 100%;
}
}
<div class="bg-image"></div>