css3-悬停时连续CSS旋转动画,悬停ou时动画返回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度。 我想重新设置动画位置,但是在语法设计上遇到了一些麻烦。

任何输入都会很棒!

Gavin asked 2019-11-08T04:39:09Z
7个解决方案
79 votes

解决方案是在.elem中设置默认值。但是此动画可以与-moz一起正常使用,但尚未在-webkit中实现

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

它可以在Firefox上正常运行,但不能在Chrome上运行

<div class="elem"></div>
<div class="elem"></div>

Yoann answered 2019-11-08T04:39:47Z
16 votes

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

@-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;
}
felippe answered 2019-11-08T04:40:11Z
1 votes

尝试了几次,但我能够使您的jsFiddle正常工作(仅适用于Webkit)。

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

基本上,只需将当前旋转值设置为一个变量,然后对该值进行一些计算(以转换为度),然后在鼠标移动和鼠标进入时将该值设置回该元素。

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

请查看本文以获取更多信息,包括如何添加跨浏览器兼容性:[http://css-tricks.com/get-value-of-css-rotation-through-javascript/]

triq6 answered 2019-11-08T04:41:01Z
1 votes

跨浏览器兼容的JS解决方案:

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

fsw answered 2019-11-08T04:41:34Z
0 votes

这是可与网络套件配合使用的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/]

巴夫

bendytree answered 2019-11-08T04:42:11Z
-1 votes
<script>
var deg = 0

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

我所做的事情很容易...在开始时声明一个全局变量...然后按我喜欢的方式递增该变量,并使用jquery的.css递增。

omar-ali answered 2019-11-08T04:42:36Z
-2 votes

使用JavaScript完成动画后,您应该触发该动画来还原。

  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });
chovy answered 2019-11-08T04:43:00Z
translate from https://stackoverflow.com:/questions/7988962/continuous-css-rotation-animation-on-hover-animated-back-to-0deg-on-hover-out