title: Run css animation back and forth on clicks
body: <p>With css <code>@keyframes</code> I'm trying to attach some animation to an element when it is clicked. </p>
  
  <pre><code>.animate {
      animation-name: action;
      animation-duration: 2s;
      animation-timing-function: linear;
      background-color: green;
  } 
  
  @keyframes action {
      0% {
          background-color: gray; 
      }  
  
     50% {
         background-color: red;
     }
  
     100% {
         background-color: green;
     }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/jeanluca/yy3kLyd0/17/" rel="noreferrer">DEMO</a></p>
  
  <p>The <code>.animate</code> class is added on click, and the box animates from gray to green. But now I would like to animate back to gray when I click it again (toggle functionality). I tried using the same animation using <code>animation-direction: reverse</code> but no animation was played. The animation should not play initially (I encountered that a couple of times). Any suggestion how I can achieve that? </p>