CODEWITHSUNDEEP
csscss-animations
Andrés Montoya
Andrés Montoya

Reputation: 4427

Background image linear-gradient animate opacity smoothly

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%;
  }
}

Upvotes: 1

Views: 688

Answers (1)

vals
vals

Reputation: 64164

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>

Upvotes: 1

Related Questions