当悬停结束时反向svg动画？

Question

我只是希望我的svg行在用户停止在父div开关上执行它后停止动画。

有相当数量的代码所以我刚刚制作了一个jsbin：

http://jsbin.com/tiwejekicu/2/edit

所以我的问题是：如何让它像任何旧的过渡一样行动，并在悬停结束时反转。另外：为什么点击黄色方框时，左边缘会出现蓝色淡入淡出？有任何想法吗？！非常感谢您的帮助！

Answer 1

您需要有两个@keyframe规则：

@keyframe in {
from {something;}
to {to something;}
}
@keyframe out {
from {something;}
to {transform: rotate(0deg);}
}

查看this question它基本相同。