title: CSS3 transform not working on Firefox, why?
body: <p>Hi here's my code in JSFiddle</p>
  
  <p><a href="http://jsfiddle.net/qnbxaLwh/" rel="nofollow">http://jsfiddle.net/qnbxaLwh/</a></p>
  
  <p>Here's the simple HTML</p>
  
  <pre><code>&lt;span class="arrow"&gt;xssss&lt;/span&gt;
  </code></pre>
  
  <p>Here's my CSS</p>
  
  <pre><code>.arrow {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding-right:10px;
      bottom: 5%;
      left: 0;
      right: 0;
      -webkit-animation: bounce 2s infinite;
      -moz-animation: bounce 2s infinite;
      -ms-animation: bounce 2s infinite;
      -o-animation: bounce 2s infinite;
      animation: bounce 2s infinite;
  }
   @-webkit-keyframes bounce {
       0%, 20%, 50%, 80%, 100% {
       -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
       -ms-transform: translateY(0);
       -o-transform: translateY(0);
       transform: translateY(0);
      }
       40% {
       -webkit-transform: translateY(-6px);
       -moz-transform: translateY(-6px);
       -ms-transform: translateY(-6px);
       -o-transform: translateY(-6px);
       transform: translateY(-6px);
      }
       60% {
       -webkit-transform: translateY(-5px);
       -moz-transform: translateY(-5px);
       -ms-transform: translateY(-5px);
       -o-transform: translateY(-5px);
       transform: translateY(-5px);
      }
  }
  @-moz-keyframes bounce {
       0%, 20%, 50%, 80%, 100% {
       -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
       -ms-transform: translateY(0);
       -o-transform: translateY(0);
       transform: translateY(0);
      }
       40% {
       -webkit-transform: translateY(-6px);
       -moz-transform: translateY(-6px);
       -ms-transform: translateY(-6px);
       -o-transform: translateY(-6px);
       transform: translateY(-6px);
      }
       60% {
       -webkit-transform: translateY(-5px);
       -moz-transform: translateY(-5px);
       -ms-transform: translateY(-5px);
       -o-transform: translateY(-5px);
       transform: translateY(-5px);
      }
  }
  @-ms-keyframes bounce {
       0%, 20%, 50%, 80%, 100% {
       -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
       -ms-transform: translateY(0);
       -o-transform: translateY(0);
       transform: translateY(0);
      }
       40% {
       -webkit-transform: translateY(-6px);
       -moz-transform: translateY(-6px);
       -ms-transform: translateY(-6px);
       -o-transform: translateY(-6px);
       transform: translateY(-6px);
      }
       60% {
       -webkit-transform: translateY(-5px);
       -moz-transform: translateY(-5px);
       -ms-transform: translateY(-5px);
       -o-transform: translateY(-5px);
       transform: translateY(-5px);
      }
  }
  @keyframes bounce {
       0%, 20%, 50%, 80%, 100% {
       -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
       -ms-transform: translateY(0);
       -o-transform: translateY(0);
       transform: translateY(0);
      }
       40% {
       -webkit-transform: translateY(-6px);
       -moz-transform: translateY(-6px);
       -ms-transform: translateY(-6px);
       -o-transform: translateY(-6px);
       transform: translateY(-6px);
      }
       60% {
       -webkit-transform: translateY(-5px);
       -moz-transform: translateY(-5px);
       -ms-transform: translateY(-5px);
       -o-transform: translateY(-5px);
       transform: translateY(-5px);
      }
  }
  </code></pre>
  
  <p>I've been trying for hours but I don't understand why it's not working on firefox. I tried rearranging and googling some stuffs but nothing works.</p>