悬停时消失的CSS动画

Question

我想在悬停时产生相同的效果

悬停中的动画效果很好，但是悬停时我想要相同的效果。

我尝试使用“动画填充模式：两者；”但是不能像过渡一样工作。

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%;
  }
}