title: Why doesn't this slideshow work in Firefox?
body: <p>I have created a slideshow that works perfect in Chrome, however, when I open the website in Firefox the slideshow doesn't show up at all. I have tried out some suggestions on solutions I found here on StackOverflow but nothing has worked so far.</p>
  
  <p>Any ideas why this is happening?</p>
  
  <p>Press on 'Run the code snippet' below to see the code in action. If your using Chrome everything should work fine, if Firefox it won't work at all...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide-box {
   position: absolute;
   z-index: 1;
   height: 100vh;
   width: 100%;
  }
  .slide-box .slideshow {
   background-color: #000000;
   width: 100wv;
   height: 100vh;
  }
  .slide-box .slideshow .background {
   position: absolute; /* For overlapping of page 1*/
   width: 100%;
   height: 90vh;
   bottom: 0;
   left: 0;
   opacity: 0;
   z-index: 0;
   -webkit-backface-visibility: hidden;
   -webkit-animation: imageAnimation 48s linear infinite 0s;
   -moz-animation: imageAnimation 48s linear infinite 0s;
   -o-animation: imageAnimation 48s linear infinite 0s;
   -ms-animation: imageAnimation 48s linear infinite 0s;
   animation: imageAnimation 48s linear infinite 0s; 
   -webkit-filter: grayscale(10%);
   filter: grayscale(10%);
  }
  .slide-box .slideshow .background:nth-child(1) { 
   background: url(https://images5.alphacoders.com/330/330145.jpg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }
  .slide-box .slideshow .background:nth-child(2) { 
   background: url(https://hdwallsource.com/img/2014/4/background-wallpaper-22922-23558-hd-wallpapers.jpg) no-repeat center center;  
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   -ms-animation-delay: 8s;
   animation-delay: 8s; 
  }
  .slide-box .slideshow .background:nth-child(3) { 
   background: url(https://www.walldevil.com/wallpapers/a89/wallpapers-backgrounds-scenic-desktop-background-landscape-landscapes-nature-roads-road.jpg) no-repeat center center;  
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   -webkit-animation-delay: 16s;
   -moz-animation-delay: 16s;
   -o-animation-delay: 16s;
   -ms-animation-delay: 16s;
   animation-delay: 16s; 
  }
  .slide-box .slideshow .background:nth-child(4) { 
   background: url(https://images5.alphacoders.com/330/330145.jpg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   -ms-animation-delay: 24s;
   animation-delay: 24s;
  }
  .slide-box .slideshow .background:nth-child(5) { 
   background: url(https://hdwallsource.com/img/2014/4/background-wallpaper-22922-23558-hd-wallpapers.jpg) no-repeat center center;  
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   -webkit-animation-delay: 32s;
   -moz-animation-delay: 32s;
   -o-animation-delay: 32s;
   -ms-animation-delay: 32s;
   animation-delay: 32s; 
  }
  .slide-box .slideshow .background:nth-child(6) { 
   background: url(https://www.walldevil.com/wallpapers/a89/wallpapers-backgrounds-scenic-desktop-background-landscape-landscapes-nature-roads-road.jpg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   -webkit-animation-delay: 40s;
   -moz-animation-delay: 40s;
   -o-animation-delay: 40s;
   -ms-animation-delay: 40s;
   animation-delay: 40s; 
  }
  
  /* Animation for the slideshow images */
  
  @-webkit-keyframes imageAnimation { 
      0% { opacity: 0;
      -webkit-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -webkit-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-moz-keyframes imageAnimation { 
      0% { opacity: 0;
      -moz-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -moz-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-o-keyframes imageAnimation { 
      0% { opacity: 0;
      -o-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -o-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-ms-keyframes imageAnimation { 
      0% { opacity: 0;
      -ms-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -ms-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @keyframes imageAnimation { 
      0% { opacity: 0;
      animation-timing-function: ease-in; }
      8% { opacity: 1;
           animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slide-box"&gt;
    &lt;div class="slideshow"&gt;
     &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>