title: Reuse CSS animation in reversed direction (by resetting the state?)
body: <p>I've used two keyframe animations in CSS. One moves from left to right and the other one uses exact the same values - but reversed.</p>
  
  <pre><code>@keyframes moveLeft
  {
      from {transform: translate3d(50px, 0, 0);}
      to   {transform: translate3d(0px, 0, 0);}
  }
  
  
  @keyframes moveRight
  {
      from {transform: translate3d(0px, 0, 0);}
      to   {transform: translate3d(50px, 0, 0);}
  }
  </code></pre>
  
  <p>However, I wonder whether it's possible to use one keyframe animation only. but as soon as I add <code>animation-direction: reverse</code>, the animation does only play once. It probably saves the information that it has been used once before.
  So: can I reset this information somehow? Or is there any possibility to use one animation twice in different directions? (without using JS)</p>
  
  <p><a href="http://jsfiddle.net/vrhfd66x/" rel="noreferrer">http://jsfiddle.net/vrhfd66x/</a></p>