悬停时连续 CSS 旋转动画，悬停时动画回到 0deg

我有一个元素，当你将鼠标悬停在它上面时，它会无限旋转。当您将鼠标悬停在外面时，动画就会停止。简单的：

@-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 度。我想用动画回到那个位置，但我在计算语法时遇到了一些麻烦。

任何输入都会很棒！

解决方案是在 .element 中设置默认值。 但是这个动画在 -moz 中工作得很好，但尚未在 -webkit 中实现

看看我从你那里更新的小提琴：http://jsfiddle.net/DoubleYo/4Vz63/1648/ 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>