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

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

提问by Gavin

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;
}

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.

但是，当您悬停时，动画会突然停止，恢复为 0 度。我想动画回到那个位置，但我在计算语法时遇到了一些麻烦。

Any input would be awesome!

任何输入都会很棒！

回答by Yoann

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

解决方案是在您的 .elem 中设置默认值。但是这个动画在 -moz 下可以正常工作，但在 -webkit 中还没有实现

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

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

It works fine with Firefox but not with Chrome

它适用于 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>

回答by felippe

Here's a simple working solution:

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

@-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;
}

回答by fsw

Cross browser compatible JS solution:

跨浏览器兼容JS解决方案：

var e = document.getElementById('elem');
var spin = false;

var spinner = function(){
e.classList.toggle('running', spin);
if (spin) setTimeout(spinner, 2000);
}

e.onmouseover = function(){
spin = true;
spinner();
};

e.onmouseout = function(){
spin = false;
};

body { 
height:300px; 
}
#elem {
position:absolute;
top:20%;
left:20%;
width:0; 
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
border-radius: 75px;
}

#elem.running {
animation: spin 2s linear 0s infinite;
}

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

<div id="elem"></div>

回答by triq6

It took a few tries, but I was able to get your jsFiddle to work (for Webkit only).

尝试了几次，但我能够让您的 jsFiddle 工作（仅适用于 Webkit）。

There's still an issue with the animation speed when the user re-enters the div.

当用户重新进入 div 时，动画速度仍然存在问题。

Basically, just set the current rotation value to a variable, then do some calculations on that value (to convert to degrees), then set that value back to the element on mouse move and mouse enter.

基本上，只需将当前旋转值设置为一个变量，然后对该值进行一些计算（转换为度数），然后将该值设置回鼠标移动和鼠标输入的元素。

Check out the jsFiddle: http://jsfiddle.net/4Vz63/46/

查看 jsFiddle：http: //jsfiddle.net/4Vz63/46/

Check out this article for more information, including how to add cross-browser compatibility: http://css-tricks.com/get-value-of-css-rotation-through-javascript/

查看这篇文章了解更多信息，包括如何添加跨浏览器兼容性：http: //css-tricks.com/get-value-of-css-rotation-through-javascript/

回答by bendytree

Here's a javascript implementation that works with web-kit:

这是一个适用于 web-kit 的 javascript 实现：

var isHovering = false;

var el = $(".elem").mouseover(function(){
    isHovering = true;
    spin();
}).mouseout(function(){
    isHovering = false;
});

var spin = function(){
    if(isHovering){
        el.removeClass("spin");

        setTimeout(function(){
            el.addClass("spin");

            setTimeout(spin, 1500);
        }, 0);
    }
};
spin();

JSFiddle: http://jsfiddle.net/4Vz63/161/

JSFiddle：http: //jsfiddle.net/4Vz63/161/

Barf.

巴夫。

回答by omar-ali

<script>
var deg = 0

function rotate(id)
{
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';
    $('#'+id).css('-webkit-transform',txt);
}
</script>

What I do is something very easy... declare a global variable at the start... and then increment the variable however much I like, and use .css of jquery to increment.

我所做的是非常简单的事情……在开始时声明一个全局变量……然后随心所欲地增加变量，并使用 jquery 的 .css 来增加。

回答by chovy

You should trigger the animation to revert once it's completed w/ javascript.

一旦使用javascript完成，您应该触发动画恢复。

  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });