title: CSS animation with fill-mode including transition not working in firefox properly
body: <p>This works fine in Chrome, but won't in Firefox <em>(Here is the <a href="http://codepen.io/fmtoffolo/pen/hxfkH" rel="nofollow">online demo</a>)</em>:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.box {
      background-color:blue;
      width:100px;
      height:100px;
      margin: 0 auto;
      transform: translate(-200px);
      animation-name: test;
      animation-duration: 3s;
      animation-fill-mode: forwards;
      transition: all 0.25s ease;
  }
  
  .box:hover {
      border-radius: 100%;
  }
  
  @keyframes test {
      100% {
          transform: translate(0px);
      }
  }
  </code></pre>
  
  <p>If I remove the transition it works properly. It seems to be as if the transition, when activated by the on hover, removes the state set by the fill-mode: forwards.</p>
  
  <p>Is there a way around it in firefox?</p>