title: How to smoothly revert CSS animation to its current state?
body: <p>I've got <em>not animated</em> element as default. There's also a trigger that lets me turn on &amp; off animation on that element. The animation itself is very simple: moves element from left to the right and back.</p>
  
  <p>When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.</p>
  
  <p>Here's my element and animation: <a href="http://jsfiddle.net/2Lwftq6r/" rel="noreferrer">http://jsfiddle.net/2Lwftq6r/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input type="checkbox" id="anim"&gt;
  &lt;label for="anim"&gt;Start / stop animation&lt;/label&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div { 
      margin-top: 50px;
      width: 50px; height: 10px;
      background: #000;
      transform: translateX(0);
  }
  
  #anim:checked ~ div {
      -webkit-animation: dance 2s infinite ease-in-out;
      -moz-animation: dance 2s infinite ease-in-out;
  }
  
  @-webkit-keyframes dance {
    0%, 100% { -webkit-transform: translateX(0); }
    50% { -webkit-transform: translateX(300px); }
  }
  @-moz-keyframes dance {
    0%, 100% { -moz-transform: translateX(0); }
    50% { -moz-transform: translateX(300px); }
  }
  </code></pre>