在悬停时连续CSS旋转动画，在悬停时动画回到0deg [英] Continuous CSS rotation animation on hover, animated back to 0deg on hover out

问题描述

我有一个元素，当你无限期悬停在它上面旋转。当你悬停在外面时，动画停止。简单：

I have an element that spins when you hover over it indefinitely. When you hover out, the animation stops. Simple:

@-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度。

When you hover out, though, the animation abruptly ceases, reverting to 0 degrees. I'd like to animate back to that position, but I'm having some trouble working out the syntax.

任何输入都是非常棒的！

Any input would be awesome!

推荐答案

解决方案是在.elem中设置默认值。
但是这个annimation工作正常与-moz但尚未实现在-webkit

The solution is to set the default value in your .elem. But this annimation work fine with -moz but not yet implement in -webkit

看看我更新了从你的小提琴：
http://jsfiddle.net/DoubleYo/4Vz63/1648/

Look at the fiddle I updated from yours : http://jsfiddle.net/DoubleYo/4Vz63/1648/

它可以在Firefox中正常工作，但不能与Chrome连接。

It works fine with Firefox but not with 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>

这篇关于在悬停时连续CSS旋转动画，在悬停时动画回到0deg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！