title: CSS Transition on hover: animate mouse-out as well
body: <p>I want to animate a css-arrow (pointing to the left) on hover to move slightly right on hover and stay there. Once the mouse hovers out the arrow it should move backwards with the animation as well.</p>
  
  <pre><code>@-webkit-keyframes arrow-left {
      0% {
          -webkit-transform: translateX(0);
          transform:translateX(0);
      }
      20% {
          -webkit-transform:translateX(0);
          transform:translateX(0);
      }
      100% {
          -webkit-transform:translateX(-12px);
          transform:translateX(-12px);
      }
  }
  
  @keyframes arrow-left {
      0% {
          -webkit-transform:translateX(0);
          transform:translateX(0);
      }
      20% {
          -webkit-transform:translateX(0);
          transform:translateX(0);
      }
      100% {
          -webkit-transform:translateX(-12px);
          transform:translateX(-12px);
      }
  }
  
  .arrow-icon.left:hover {
      -webkit-animation:arrow-left 0.35s ease-in;
    animation:arrow-left 0.35s ease-in;
    -webkit-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
    transform-origin:50% 0%
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>Any idea on how to make the animation out work as well, so it animates back and doesn't jump back?</p>
  
  <p><a href="https://jsfiddle.net/gsvjwxxj/" rel="nofollow">https://jsfiddle.net/gsvjwxxj/</a></p>