css背景自动改变动画

Question

pretty new to coding so this is probably a very simple problem but everyone starts somewhere you know, dont judge.

im trying to make an automatically changing background. I'm aware that i dont have the animation attributes / percentages done correctly.. i am currently messing around with it !

question is as soon as i put a linear-gradient on the animation backgrounds the transition ease was null and void. Is this always the case or am i doing it wrong ? thank you

header {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.2)),
    url("./hero.jpeg") center center/cover;
  animation: animate 30s infinite forwards ease;

  @keyframes animate {
    0% {
      background: linear-gradient(rgba(0, 0, 0, 0.2)),
        url(./hero.jpeg) center center/cover;
    }
    20% {
      background: linear-gradient(rgba(0, 0, 0, 0.2)),
        url(./hero2.jpeg) center center/cover;
    }
    40% {
      background: linear-gradient(rgba(0, 0, 0, 0.2)),
        url(./hero3.jpeg) center center/cover;
    }
    60% {
      background: linear-gradient(rgba(0, 0, 0, 0.2)),
        url(./hero4.jpeg) center center/cover;
    }
    80% {
      background: linear-gradient(rgba(0, 0, 0, 0.2)),
        url(./hero5.jpeg) center center/cover;
    }
    100% {
      background: linear-gradient(rgba(0, 0, 0, 0.2)),
        url(./hero.jpeg) center center/cover;
    }
  }
}

Answer 1

The linear gradient should have at least two values, not one, and you shouldn't have a comma separating the two backgrounds. You didn't give me two values, so I just removed the gradient for the transparent color.

Wrong

  background: linear-gradient(rgba(0, 0, 0, 0.2)),
    url(./hero.jpeg) center center/cover;

Correct

  background: rgba(0, 0, 0, 0.2)
    url(./hero.jpeg) center center/cover;

 header { height: 100vh; animation: animate 30s infinite forwards ease; } @keyframes animate { 0% { background: rgba(0, 0, 0, 0.2) url("https://picsum.photos/id/1/200/200") center center/cover; } 20% { background: rgba(0, 0, 0, 0.2) url("https://picsum.photos/id/2/200/200") center center/cover; } 40% { background: rgba(0, 0, 0, 0.2) url("https://picsum.photos/id/3/200/200") center center/cover; } 60% { background: rgba(0, 0, 0, 0.2) url("https://picsum.photos/id/4/200/200") center center/cover; } 80% { background: rgba(0, 0, 0, 0.2) url("https://picsum.photos/id/5/200/200") center center/cover; } 100% { background: rgba(0, 0, 0, 0.2) url("https://picsum.photos/id/1/200/200") center center/cover; } }

 <header></header>