如何在悬停结束时反转关键帧动画（获得悬停时元素的状态）？

Question

如果我在div悬停上运行关键帧动画（例如，持续3秒钟）并且元素悬停在2秒内结束，则动画突然结束并重置div位置。这是一个示例，我将鼠标悬停在3秒内将div旋转到360度。如果我在两秒钟内将鼠标悬停，动画将突然结束。

我希望动画从旋转到的确切角度反转。 （请参见下面的演示）

如何防止元素重置为原始位置，并开始将动画从旋转角度反转到原始位置。

.box {
  width : 160px; height : 160px; background-color : green;
}
.box:hover {
  -webkit-animation: move 3s;
}

@-webkit-keyframes move {
  0%   { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}

<div class ="box"></div>

我相信这需要使用mouseout事件使用某些JS / jQuery来完成，但我不知道该如何实现。

我们将不胜感激。