平滑地结束无限循环的css3动画

Question

我的侧边栏中有图标，可以使用动画开始旋转。当用户的鼠标离开元素时，动画会突然停止。我试图以某种方式使这种转变更加顺利。

以下是我正在做的简化版本：

div {
  font-size:18px;
  line-height:32px;
  width:32px;
  height:32px;
  background-color: yellow;
  border-radius: 16px;
  text-align: center;
}

div:hover {
  animation: spin 2s;
}

@keyframes spin {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

<p>Hover over the yellow circle below.</p>
<div>F</div>

有什么方法可以让元素完成迭代周期，或以其他方式放松动画？