title: CSS Animation transition does not work on Firefox
body: <p>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.</p>
  <pre><code>.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);
    }
  }
  </code></pre>
  <p>Checking inspector and I can see that the following is active:</p>
  <pre><code>-webkit-animation: animate 15s ease-in-out infinite;
  </code></pre>
  <p>What do I do wrong?</p>
  <p>Thanks.</p>