为什么不能通过切换动画方向来反转动画？

Question

当鼠标移入时淡出和鼠标移出时淡入，this answer prepared keyframes dedicated进入和淡出。

我认为使用animation-direction可以只用一个关键帧来完成，但是淡入/淡出动画实际上并不能像下面的代码那样工作。 为什么会这样？

div {
  width: 250px;
  height: 250px;
  position: absolute;
}

.el1 {
  background-color: pink;
  z-index: 1;
  animation: fadeout_and_in 1s forwards;
  animation-direction: reverse;  /* why dont work animation? */
}

.wrap:hover .el1 {
  animation-direction: normal;  /* why dont work animation? */
}

@keyframes fadeout_and_in {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="wrap">
  <div class="el1">
  </div>
</div>