CSS Animation transition does not work on Firefox

Question

I am trying to create a slideshow as background but it does not work in Firefox. The image change but there is not the specified transition.

.main-page {
  width: 100%;
  height: 100vh;
  animation: animate 15s ease-in-out infinite;
  -webkit-animation: animate 15s ease-in-out infinite;
  -moz-animation: animate 15s ease-in-out infinite;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
  background-size: cover;
}

@keyframes animate {

  0%,
  100% {
    background-image: url(/img/001.jpg);
  }

  50% {
    background-image: url(/img/002.jpg);
  }
}

Checking inspector and I can see that the following is active:

-webkit-animation: animate 15s ease-in-out infinite;

What do I do wrong?

Thanks.

Answer 1

It seems that FF and Chrome interpret animation between background images differently. Chrome continuously fading one out while fading the next one in (as with background color) but FF just shows one, then the other.

One way round this for the two image situation shown in the question is to put the background images on before and after pseudo elements and use CSS animations to fade them in and out using opacity which FF does treat as animatable.

Here's a simple example as demo:

.main-page {
  width: 100%;
  height: 100vh;
}

.main-page::before,
.main-page::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  animation: animate 15s ease-in-out infinite;
  -webkit-animation: animate 15s ease-in-out infinite;
  -moz-animation: animate 15s ease-in-out infinite;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
  background-size: cover;
}

.main-page::before {
  background-image: url(https://picsum.photos/id/1015/200/300);
}

.main-page::after {
  background-image: url(https://picsum.photos/id/1016/200/300);
  animation-delay: 7.5s;
}

@keyframes animate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="main-page"></div>