使用@keyframes对伪类进行动画处理

Question

我有以下代码：

.link {
  font-family: 'Arial';
  text-transform: Uppercase;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.link:after {
  content: "";
  display: block;
  padding-top: 3px;
  border-bottom: 2px solid black;
  transform: scaleX(1);
  transition: transform 250ms ease-in-out;
  transform-origin: 0% 50%
}

.link:hover:after {
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

<a href="#" class="link">Some Random Link</a>

当我将鼠标悬停在链接上时，我有一个简单的动画。基本上，当我将鼠标悬停在元素上时，下划线会向右滑出，而当我离开元素时，下划线会从左滑入。

我想要的是，当我将鼠标悬停在Element上时，它将播放整个动画。我尝试使用@keyframes创建动画，但无法正常工作，因为我不知道如何仅对Pseudo-Class :: after而不对整个元素进行动画处理。

这里还是一个JSFiddle，可以更好地解释我要做什么：JSFiddle