如何让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是在悬停时添加 CSS 属性animation-name:rotate;以启动无限旋转。然后在 a 上触发的另一个函数mouseout添加了一个事件侦听器，animationiteration以便当动画迭代时它可以停止旋转。要结束旋转，#square请获取 的 CSS 属性animation-name:none;。最后，#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，以切换线性和缓出属性。