title: CSS Transition after animation ends
body: <p>I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down.</p>
  
  <p>Is it possible to get it to transition back after we mouse off and the animation ends?</p>
  
  <p>You can see an example here: <a href="http://codepen.io/jhealey5/pen/zvXBxM" rel="noreferrer">http://codepen.io/jhealey5/pen/zvXBxM</a></p>
  
  <p>Simplified code here:</p>
  
  <pre><code>    div {
          width: 200px;
          height: 200px;
          margin: 40px auto;
          background-color: #b00;
          position: relative;
  
          &amp;:hover {
              span {
                  transform: translateY(-60px);
                  animation-name: rotate;
                  animation-duration: 1s;
                  animation-delay: .5s;
                  animation-iteration-count: infinite;
                  animation-direction: alternate;
              }
          }
      }
  
      span {
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #fff;
          bottom: 10px;
          left: 0;
          right: 0;
          margin: auto;
          transition: .5s;
      }
  
      @keyframes rotate {
          from {
              transform: translateY(-60px) rotate(0);
          }
          to {
              transform: translateY(-60px) rotate(-90deg);
          }
      }
  </code></pre>