title: Transition doesn't work after animation forwards
body: <p>Hie!</p>
  
  <p>Transition doesn't work after animation with animation-fill-mode: forwards;
  First animation fires and ends on hover, but then after unhovering transition doesn't apply.</p>
  
  <p>Codepen <a href="https://codepen.io/g1un/pen/oGrgPw?editors=1100" rel="nofollow noreferrer">here</a></p>
  
  <p>It reproduces in chrome and safari. In firefox works fine.</p>
  
  <p>pug:</p>
  
  <pre><code>button Button
  </code></pre>
  
  <p>scss:</p>
  
  <pre><code>body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  button {
    padding: 5px 0;
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
  
    &amp;:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 100%;
      right: 0;
      height: 4px;
      border-radius: 2px;
      background: blue;
      transition: all .25s;
    }
  
    &amp;:hover {
  
      &amp;:before {
        animation: nav-link-hover .25s forwards;
      }
    }
  }
  
  @keyframes nav-link-hover {
  
      0% {
          left: 0;
          right: 100%;
      }
  
      100% {
          left: 0;
          right: 0;
      }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong><br>
  I've found workaround but will wait for any answer and gladly accept it if it will be better or for example successfully uses broken keyframes.</p>