向后运行动画而无需重新创建关键帧

Question

如何在不创建新关键帧的情况下向后运行关键帧？

这是我的代码，当将.container悬停在top-line动画上时。当鼠标悬停容器时，我想向后运行。

.container {
  display: flex;
  justify-content: center;
  background-color: black;
  width: 100%;
  height: 80px;
  margin-top: 100px;
}

.line {
  width: 50px;
  height: 4px;
  background: red;
}

.container:hover .line {
  animation: top-line .5s linear forwards;
}

@keyframes top-line {
  0% {
    transform: translate3d(0,0,0) scaleY(1) scaleX(1);
  }
  25% {
    transform: translate3d(0,-3px,0) scaleY(1) scaleX(1);
  }
  50% {
    transform: translate3d(0,20px,0) scaleY(.3) scaleX(1);
  }
  100% {
    transform: translate3d(0,20px,0) scaleY(.3) scaleX(8);
  }
}

<div class="container">
  <div class="line"></div>
</div>