如何使 CSS 动画在悬停时缓慢停止？答案

【问题标题】：How to make a CSS animation slow to a stop on hover out?如何使 CSS 动画在悬停时缓慢停止？
【发布时间】：2016-11-06 20:12:30
【问题描述】：

我有一个 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/

【问题讨论】：

标签： css

【解决方案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 以切换线性和缓出属性。

【讨论】：