我有一个元素，当你无限期悬停在它上面旋转。当你悬停在外面时，动画停止。简单：
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
当你悬停在外面时，动画突然停止，恢复到0度。我想动画回到那个位置，但我有一些麻烦工作的语法。
任何输入将是真棒！
解决方法
解决方案是在.elem中设置默认值。
但是这种annimation工作正常-moz但尚未实现在-webkit
但是这种annimation工作正常-moz但尚未实现在-webkit
看看我从你的更新的小提琴：
http://jsfiddle.net/DoubleYo/4Vz63/1648/
它适用于Firefox，但不是与Chrome
.elem{
position: absolute;
top: 40px;
left: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
transition-property: transform;
transition-duration: 1s;
}
.elem:hover {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="elem"></div>
