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

Question

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

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

任何输入都会很棒!

Answer 1

解决方案是在您的 .elem 中设置默认值。 但是这个动画在 -moz 上工作得很好，但还没有在 -webkit 中实现

看看我从你那里更新的 fiddle : 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>