title: CSS Keyframes animation go back to initial state
body: <p>I'm calling an animation like this:</p>
  
  <pre><code>document.getElementById('banner').className = "changeColorToIndigo";
  </code></pre>
  
  <p>Then I've got the CSS property:</p>
  
  <pre><code>div.changeColorToIndigo {
  animation-duration: 1s;
  animation-name: changeColorToIndigo;
  animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>And the keyframes animation:</p>
  
  <pre><code>@keyframes changeColorToIndigo {
  from {background-color: #00BBD2;}
  to {background-color: #3F51B5;}
  }
  </code></pre>
  
  <p>But the animation goes back to it's initial state after the animation has completed, why is that? I've set the fill mode to forwards and specified the <code>to</code> (100%) property.</p>