CSS keyframe animation does not work in Mozilla

advertisements

I am trying to make 2 background images fade, and while working correctly in Chrome/Safari, I'm having no luck with Firefox.

html {
    height: 100%;
    background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
animation: slides 20s linear infinite;
   -webkit-animation: slides 20s linear infinite;
    -moz-animation: slides 20s linear infinite;
    -o-animation: slides 20s linear infinite;
    -ms-animation: slides 20s linear infinite;
}

@-moz-keyframes slides {
  from {
        -moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");

    -moz-background-size: cover;
    }
60% {
        -moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");

    -moz-background-size: cover;
    }

    to {
        -moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");

    -moz-background-size: cover;
    }
}

@-webkit-keyframes slides {
    from {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
     -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
60% {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
     -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    to {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
      -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
}

@keyframes slides {
 from {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
 background-size: cover;
    }
60% {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  background-size: cover;
    }

    to {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
    background-size: cover;
    }
}

I've tried having the CSS inline and linking to an external stylesheet but neither have worked. Any guidance would be much appreciated. Thanks!


Animating background images does not work cross browser, so I suggest you use a pseudo to achieve that.

html {
  position: relative;
  height: 100%;
  background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-animation: slides 20s linear infinite;
  -moz-animation: slides 20s linear infinite;
  animation: slides 20s linear infinite;
}

@-webkit-keyframes slides {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes slides {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slides {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

div.container {
  position: relative;           /*  needed on all direct children  */
  background: white;
  font-size: 24px;
  padding: 30px;
}
<div class="container">
  This content is not affected by the background animation
</div>