Change body opacity keyframe

Question

I want to change the body opacity using keyframes, also open to use javascript as my end goal is getting a bunch of pictures and making them into a slideshow type thing in the background, not using a div as that messes up the other content I have on the website,however, obviously if the only way is using a div then I guess I'll have to :)

Th color changing works but not the opacity.

Was wondering if someone could help, here is my css.

body {
  animation: back 5s infinite;
  
}

@keyframes back {
  0% {
    background: red;
    opacity: 1;
  }

  50% {
    background: yellow;
    opacity: 0;
  }

  100% {
    background: red;
    opacity: 1;
  }
}

 

Answer 1

This is because of the background propagation making the background on the html element and no more the body element.

To avoid this add a white background to html (or any non transparent background) and make sure the body is at least full height:

body {
  animation: back 5s infinite;
  margin:0;
  min-height:100vh;

}

@keyframes back {
  0% {
    background: red;
    opacity: 1;
  }

  50% {
    background: yellow;
    opacity: 0;
  }

  100% {
    background: red;
    opacity: 1;
  }
}

html {
  background:#fff;
}