悬停时连续的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中设置默认值.但是这个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>

Answer 2

这是一个简单的工作解决方案:

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.elem:hover {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}