css анимация при зависании просто исчезает

Question

Я пытаюсь добиться того же эффекта при наведении курсора

Анимация в режиме наведения работает отлично, но я хочу, чтобы тот же эффект при наведении курсора.

Я пробовал с "animation-fill -режим: оба; " Но не работает как переход.

https://codepen.io/josedeharo/pen/yLYJKEb

<div class="center">
<div class="container">
  <a class="link">Hover over me (Horizontal effect)</a>
 </div>
</div>

.container {
  position:relative;
  display:inline-block;
  padding: 10px;

  &:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height:100%;
  background: $hover-bg;
  z-index: -1;
  content: '';
  }

  &:hover::before {
    animation: bg-animation 0.4s 1;
  animation-fill-mode: forwards;
  }
}

@keyframes bg-animation {
  0% {
    width: 0%;
  }

  100% {
    width:100%;
  }
}