title: CSS animation-direction not working as I would have expected
body: <blockquote>
  <p><strong>N.B.</strong> With the (more complex) setup I'm actually working with I can't use <code>CSS Transitions</code>. I recognise that <code>CSS Transitions</code> would be a
  perfectly good solution in the example below.</p>
  </blockquote>
  <p>I'm having a little trouble with</p>
  <pre><code>animation-direction: reverse
  </code></pre>
  <p>which I've never used before but doesn't seem to be running the way I might have expected it to.</p>
  <p>The easiest solution to my problem would be to write two CSS <code>@keyframes</code> animations and use one or the other.</p>
  <p>But for the sake of economy and elegance I would like to use <strong>a single animation</strong> and play it forwards or backwards.</p>
  <p>This example below shows the effect I'm trying to achieve.</p>
  <p>When the page loads, pressing <em>either button</em> will fire the intended animation.</p>
  <p>However, after one button is pushed, <strong>the animation no longer runs</strong> and only the end-frame of the forwards or reverse animation is displayed.</p>
  <p>What am I doing wrong here?</p>
  <p><strong>Working Example:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const square = document.querySelector('.square');
  const buttonOutbound = document.querySelector('button.outboundButton');
  const buttonReturn = document.querySelector('button.returnButton');
  
  
  buttonOutbound.addEventListener('click', () =&gt; {   
    square.className = 'square';   
    square.classList.add('outbound');
  }, false);
  
  buttonReturn.addEventListener('click', () =&gt; {   
    square.className = 'square';
    square.classList.add('return');
  }, false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.square {
    width: 100px;
    height: 100px;
    margin: 12px;
    background-color: red;
    transform: translateX(0) scale(1);
  }
  
  .square.outbound {
    animation: animateSquare 1s linear normal forwards;
  }
  
  .square.return {
    animation: animateSquare 1s linear reverse forwards;
  }
  
  @keyframes animateSquare {
    
    100% {
      background-color: blue;
      transform: translateX(200px) scale(0.5);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="square"&gt;&lt;/div&gt;
  &lt;button type="button" class="outboundButton"&gt;Outbound animation&lt;/button&gt;
  &lt;button type="button" class="returnButton"&gt;Return animation&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>