FIREFOX fade in/out div background image not working

Question

I have a div with a slideshow background image. It works perfectly on Safari and Android mobile, but doesn't work fully on Firefox : The fade in effect doesn't appear.

@keyframes fadeBG {
  25% {
    background-image: url("https://source.unsplash.com/1110x220/?beach");
  }
  50% {
    background-image: url("https://source.unsplash.com/1110x220/?castle");
  }
  75% {
    background-image: url("https://source.unsplash.com/1110x220/?lake");
  }
}
/* NOTE: images of different aspect ratios will stretch and move */

.jumbotron {
  background-image: url('https://source.unsplash.com/1110x220/weekly');
  background-position: center;
  background-size: cover;
  animation: fadeBG 16s cubic-bezier(0.75, 0, 0.15, 1) infinite;
  box-shadow: 0 -100vh rgba(0, 0, 0, 0.2) inset;
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="jumbotron my-2">
    <h1>Background Slideshow</h1>
    <p>CSS only animated slideshow</p>
  </div>
</div>

Could anybody point me to the right direction? Thx