title: z-index not work well in firefox
body: <p>I created simple CSS3 animations but the problem that the z-index not work well in firefox, the green box must be stacked on top of the road but in the firefox browser, So I'd like to understand why this problem is appears and what is the solution?</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>body{
   margin:0;
   color:#444;
   font:300 18px/18px Roboto, sans-serif;
      text-align:center;
  }
  .element {
      width: 320px;
      height:100px;
      position: absolute;
      z-index: 50;
      left: 50%;
      margin-left:-160px;
      top: 50%;
      background-color:#00fb69;
               
  }
  @-moz-keyframes animation {
      0% {
          transform:scale(.95,.95) translateY(0px);
      }
  
      100% {
          transform: scale(.10,.10) translateY(-800px);
      }
  }
  
  @keyframes animation {
      0% {
          transform:scale(.95,.95) translateY(0px);
      }
  
      100% {
          transform: scale(.10,.10) translateY(-800px);
      }
  }
  .road-wrap{
      -webkit-perspective:160px;
      perspective:160px;
  }
  .road-wrap .road{
      margin-top:-360px;
      -webkit-transform:rotateX(80deg);
      transform:rotateX(80deg);
  }
  .road-wrap .lane-wrap{
      -webkit-animation:steer 4s linear infinite;
      animation:steer 4s linear infinite;
      position:relative;
      z-index:-1;
  }
  .road-wrap .lane{
   width:25px;
   margin:auto;
  }
  .road-wrap .lane&gt;div{
   width:100%;
   margin:auto;
   margin-top:30px;
   margin-bottom:30px;
      position:relative;
   background-color:#444;
   -webkit-animation:lane 10s linear reverse infinite;
   animation:lane 10s linear reverse infinite;
  }
  .road-wrap .lane&gt;div:nth-child(1){height:15px}
  .road-wrap .lane&gt;div:nth-child(2){height:20px}
  .road-wrap .lane&gt;div:nth-child(3){height:30px}
  .road-wrap .lane&gt;div:nth-child(4){height:50px}
  .road-wrap .lane&gt;div:nth-child(5){height:40px}
  .road-wrap .lane&gt;div:nth-child(6){height:50px}
  .road-wrap .lane&gt;div:nth-child(7){height:40px}
  .road-wrap .lane&gt;div:nth-child(8){height:50px}
  .road-wrap .lane&gt;div:nth-child(9){height:30px}
  .road-wrap .lane&gt;div:nth-child(10){height:20px}
  .road-wrap .lane&gt;div:nth-child(11){height:15px}
  @-webkit-keyframes lane{
   0%{
          -webkit-transform:translateY(320px);
          transform:translateY(320px);
   }
   100%{
          -webkit-transform:translateY(-160px);
          transform:translateY(-160px);
   }
  }
  @keyframes lane{
   0%{
          -webkit-transform:translateY(320px) scale(.60,.60);
          transform:translateY(320px) scale(.60,.60);
   }
   100%{
          -webkit-transform:translateY(-160px) scale(.80,.80);
          transform:translateY(-160px) scale(.80,.80);
   }
  }
  
  @media(max-width:768px) {
  .element{
      width:150px;
      margin-left:-75px;
  }
  }
  @media (min-width: 768px){
      .element{
      width:250px;
      margin-left:-125px;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loading-screen"&gt;
      &lt;div class="element"&gt;
      &lt;/div&gt;
      &lt;div class="road-wrap"&gt;
          &lt;div class="road"&gt;
              &lt;div class="lane-wrap"&gt;
                  &lt;div class="lane"&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>