悬停结束时反转svg动画？答案

【问题标题】：reverse svg animation when hover is over?悬停结束时反转svg动画？
【发布时间】：2014-11-01 23:33:47
【问题描述】：

我只是希望我的 svg 线条在用户停止将鼠标悬停在父 div 开关上执行后反转它们的动画。

代码比较多，所以我只做了一个jsbin：

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

【问题讨论】：

【解决方案1】：

你需要有两个@keyframe 规则：

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

查看this question基本一样。

【讨论】：