title: Opacity from 0 to 1 animation not working on Firefox
body: <p>As the title says, this animation is not working on Firefox.</p>
  
  <p>I am running this animation through <strong>JavaScript</strong> after a few seconds by using:</p>
  
  <pre><code>document.getElementById('my_id').style.webkitAnimationPlayState = "running";
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>style.animationPlayState 
  </code></pre>
  
  <p>In the same file, changing the background-color animation works perfectly.
  My conclusion is, there is something wrong with opacity on Firefox?</p>
  
  <pre><code>#my_id {
    opacity: 0;
    animation: animation 1s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    -webkit-animation: animation 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
    -moz-animation: animation 1s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: paused;
  }
  @keyframes animation {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0.2;}
  }
  </code></pre>
  
  <p>The above CSS is from the element I want to animate.</p>