CSS3 Pulse Animation Not Working In IE And FF

So I got a animating background that loops infinite, it works perfectly fine is Chrome and Safari. But can't get it too work in IE and FF. I tried to look at other people's questio

Solution 1:

Unfortunately, background-image property, which you try to animate through background shorthand, is specified as not animatable. Browsers based on Blink engine (like Chrome and Opera) have implemented its animation as experimental extension of CSS, but you can't rely on it. As a workaround, you can try to make a sprite of the background image and animate the background-position with steps() easing function.

Also, as pointed in the comments above, you don't need -moz-, -o- and -ms- prefixes for CSS animation property and @keyframes blocks. Firefox supports them unprefixed since version 15, which has been released in 2012, and there were no shipped IE version ever that needed -ms- (IE9 didn't support it at all and IE10 already supported it unprefixed). And Opera currently uses the same engine as Chrome, but the last version with old engine (12.1x) also supported animations unprefixed.

Solution 2:

So after Ilya Strelsyn's answer I went looking for a alternative. and came up with this:

CSS

.background_1 {
  width: 102%;
  height: 102%;
  animation: BG_one 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_2 {
  width: 102%;
  height: 102%;
  animation: BG_two 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_3 {
  width: 102%;
  height: 102%;
  animation: BG_three 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_4 {
  width: 102%;
  height: 102%;
  animation: BG_four 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

@keyframes BG_one {
  0%, 100% {
    opacity: 1
  }
  12% {
    opacity: 0.5
  }
  37% {
    opacity: 0
  }
  62% {
    opacity: 0
  }
  87% {
    opacity: 0.5
  }
}

@keyframes BG_two {
  0%, 100% {
    opacity: 0.5
  }
  12% {
    opacity: 1
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 0
  }
  87% {
    opacity: 0
  }
}

@keyframes BG_three {
  0%, 100% {
    opacity: 0
  }
  12% {
    opacity: 0
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 1
  }
  87% {
    opacity: 0.5
  }
}

@keyframes BG_four {
  0%, 100% {
    opacity: 0
  }
  12% {
    opacity: 0
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 1
  }
  87% {
    opacity: 0.5
  }
}

HTML

  <div class="background_1"><img alt="bordaux" src="images/background/bordaux.jpg"></div>
  <div class="background_2"><img alt="deepblue" src="images/background/deepblue.jpg"></div>
  <div class="background_3"><img alt="green" src="images/background/green.jpg"></div>
  <div class="background_4"><img id="AJHSBD" alt="lightpink" src="images/background/lightpink.jpg"></div>

The solution does not the same output I had the first time. But since it was not compatible with other browsers, is this the best choice.

plus now there is more customizing possible.

Thank you all for your time!