动画中断后能否平滑过渡？

Question

在此fiddle中，当按钮处于活动状态时，会有一个动画（图像旋转）：

@keyframes rotation {
   from {transform: rotate(-73deg);}
   50% {transform:rotate(107deg);}
   to {transform: rotate(-73deg);}
 }
.button:active:before {
  animation: rotation 1.5s infinite;
}

但是，在我停止按下它之后，图像只是跳到了hover：before中的位置：

button:hover:before {
  transition: transform 0.2s;
  transform: rotate(-73deg);
}

没有过渡（在此也有提及）。动画中断后如何获得平滑过渡？