title: Keyframes animation not working in Firefox
body: <p>This animation is working perfectly in Safari and Chrome, but isn't working in Firefox.</p>
  
  <p>I've tried a few things including <code>-moz</code> prefixes</p>
  
  <p>Can anyone offer me advice on what's wrong here?</p>
  
  <p><a href="http://jsfiddle.net/DxZps/1/" rel="nofollow">Here's the JSFiddle</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;span class="awesome"&gt;
      &lt;span class="underline"&gt;&lt;/span&gt;
      &lt;span class="underline2"&gt;&lt;/span&gt;
      awesome
  &lt;/span&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>span.awesome{
      position: relative;
  }
  span.underline{
      position: absolute;
      top: 30px;
      height: 1px;
      background-color: black;
      -webkit-animation: underline 2s linear infinite;
      animation: underline 2s linear infinite;
  }
  span.underline2{
      position: absolute;
      top: 30px;
      height: 1px;
      background-color: black;
      opacity: 0.2;
      width: 110px;
  }
  
  @-webkit-keyframes underline{
      0%{
          width: 0px;
      }
      20%{
          width: 0px;
      }
      28%{
          width: 110px;
          margin-left: 0;
      }
      36%{
          width: 0px;
          margin-left: 110px;
          opacity: 0.8;
      }
      0%{
          width: 0px;
      }
  }
  
  @keyframes underline{
      0%{
          width: 0px;
      }
      20%{
          width: 0px;
      }
      28%{
          width: 110px;
          margin-left: 0;
      }
      36%{
          width: 0px;
          margin-left: 110px;
          opacity: 0.8;
      }
      0%{
          width: 0px;
      }
  }
  </code></pre>