如何使CSS动画缓慢停留在悬停状态？

Question

我有一个CSS动画，当我将鼠标悬停在它上面时，无限旋转div。该CSS看起来是这样的：

@-webkit-keyframes rotate { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 

#square { 
    background-color: #369; 
    height: 100px; 
    margin: 50px; 
    width: 100px; 
    -webkit-transform: rotate(0deg); 
} 

#square:hover { 
    -webkit-animation: rotate 5s linear infinite; 
} 

，我试图要解决的问题是，当我将鼠标悬停时，它突然跳回到原来的状态。当它位于动画的中间时，这可能会引起震动。有没有办法让慢慢转换回原来的状态？通常情况下，你可以用转换来完成这种事情，但它似乎不能与动画结合使用。例如，我尝试在上面的示例中将-webkit-transition: all 2s;添加到#square选择器，但它没有做任何事情。

例子：http://jsfiddle.net/93jeS/

Answer 1

我度过了这一个了几个小时，想我终于明白了。

这里是到JSFiddle

链接本质#square被添加到其上悬停启动无限旋转的animation-name:rotate;的CSS属性。然后在mouseout上触发的另一个函数将添加一个事件侦听器到animationiteration，以便当动画迭代时它可以停止旋转。要结束旋转，#square获取animation-name:none;的CSS属性。最后，将#square替换为其自身的克隆，以便在行为经过hover和mouseout的一个周期后重复该行为。

$('#square').hover(function() { 
    $(this).css('-webkit-animation-name', 'rotate'); 
}); 

$('#square').mouseout(function() { 
    $(this).on('animationiteration', function() { 
    $(this).css('-webkit-animation-name', 'none'); 
    $(this).replaceWith($(this).clone(true)); 
    }); 
}); 

此外

This Fiddle虽然稍喜怒无常可以部分解决增加一个很好的容易性出效果。我只是用一个：hover选择器来修改CSS，以切换线性属性和缓解属性。