title: How can I reverse a delayed animation?
body: <p><a href="https://jsfiddle.net/7gom9bhr/" rel="nofollow noreferrer">JS Fiddle</a></p>
  
  <p>I have a square, on hover it moves down 10px then rotates. When coming off the hover I wish for it to rotate back, then move back to 0px.</p>
  
  <p>Unfortunately it doesn't do the animations in reverse order.</p>
  
  <p>So it should, on hover:</p>
  
  <ol>
  <li>Move 10px down.</li>
  <li>Rotate 45 degrees.</li>
  </ol>
  
  <p>And off hover:</p>
  
  <ol>
  <li>Rotate back to 0 degrees.</li>
  <li>Move back to original position of 0px;</li>
  </ol>
  
  <p>Code:</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-css lang-css prettyprint-override"><code>div{
    width: 100px;
    height: 100px;
    background: blue;
    top: 0;
    cursor: pointer;
    position: absolute;
    transition: top 0.3s ease;
    transition: transform 0.3s 0.3s ease;
  }
  
  div:hover{
    top: 10px;
    transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>