title: CSS Animation - drawing line from left to right on mouseenter, then disappearing left to right on mouseleave
body: <p>I'm trying to animate a line that underlines from left to right on 'mouseenter' and then to disappear from left to right on 'mouseleave' instead of the current behaviour where it disappears right to left.</p>
  
  <p>Example of what I'm trying to achieve (but with animations not transitions): </p>
  
  <p><a href="https://jsfiddle.net/1gyksyoa/" rel="nofollow noreferrer">https://jsfiddle.net/1gyksyoa/</a> </p>
  
  <p>I have tried to reverse the 'draw' animation but this doesn't achieve what I'm trying to accomplish.</p>
  
  <pre><code>        @keyframes draw-reverse {
        100% {
          width: 0;
          background-color: red;
        }
  
        0% {
          width: 47px;
          background-color: red;
        }
  
  }
  </code></pre>
  
  <p>I have put together this to give a better understanding of the problem;</p>
  
  <p><a href="https://jsfiddle.net/Lq560be9/" rel="nofollow noreferrer">https://jsfiddle.net/Lq560be9/</a></p>
  
  <p>Currently, I have the line animating from left to right as desired on 'mouseenter', but on 'mouseleave' it disappears from right to left, whereas I am trying to get the line to also disappear from left to right.</p>