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

问题描述

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

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

任何输入都是非常棒的！

解决方案

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

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

  .elem {position：absolute; top：40px; left：40px; width：0; height：0; border-style：solid; border-width：75px; border-color：红色蓝绿色橙色; 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）;}到{transform：rotate（360deg）;}}  

class =snippet-code-html lang-html prettyprint-override> < div class =elem>< / div>

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.

Any input would be awesome!

解决方案

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

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

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屋！