停止悬停时完成动画

Question

当您使用此代码悬停时，我试图为按钮中的图标设置动画：

.mail:hover i {
  animation: correo 1s;
}

@keyframes correo {
  20% {
    transform: translate(-10px);
  }
  80% {
    transform: translate(100px);
  }
  81% {
    transform: translate(0, -50px);
  }
}

问题是当你停止在动画中间悬停时，它回到了原来的位置，但并不顺利。所以我想知道的是，当你停止悬停时，是否有某种方法可以完成动画。

自从顺利返回到原始位置后，我尝试了过渡，但我无法在一个过渡中添加两个 transform: translate();

这里有代码：https://jsfiddle.net/ch0x267q/1/