如何使一个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));
  });
});

另外

这个小提琴虽然有点喜怒无常，但可能是增加一个不错的放松效果的部分解决方案。我只是用:hover选择器修改了CSS，以切换线性和缓出属性。