当鼠标不再悬停在悬停动画上时，悬停动画会立即停止吗？
Posted
技术标签:
【中文标题】当鼠标不再悬停在悬停动画上时，悬停动画会立即停止吗？【英文标题】：Hover animation stops immediately when the mouse is no longer hovering over it? 【发布时间】：2014-09-22 05:36:25 【问题描述】：我有一个带有摆动动画的图像，当鼠标悬停在它上面时它会被激活，并且应该持续大约一秒钟。如果鼠标停留在图像上，它会完美运行并持续一段时间。但是，如果我将鼠标从图像上移开，它会猛地回到原位并且不会完成动画。如果鼠标仍然悬停在它上面，我怎样才能让它继续动画然后停止？
html：
<img class="animated wobble" src="image/elephant.png"/>
CSS：
.animated
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
.animated.infinite
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
.animated.hinge
-webkit-animation-duration: 2s;
animation-duration: 2s;
@-webkit-keyframes wobble
0%
-webkit-transform: none;
transform: none;
15%
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
30%
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
45%
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
60%
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
75%
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
100%
-webkit-transform: none;
transform: none;
@keyframes wobble
0%
-webkit-transform: none;
-ms-transform: none;
transform: none;
15%
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
30%
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
45%
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
60%
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
75%
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
100%
-webkit-transform: none;
-ms-transform: none;
transform: none;
.wobble:hover
-webkit-animation-name: wobble;
animation-name: wobble;
【问题讨论】：
你用 jquery 试过了吗？ 这是 ***.com/questions/7694323/… 的副本 --- 它提供了 javascript 和 css 解决方案（未确认）。 也与***.com/questions/22822249/… 相关——本质上是相同的问题，而且使用纯 CSS 似乎没有解决方案。 我尝试了第一个链接，代码有很大不同。我对 JavaScript 的了解不够，无法将其添加到我的代码中。 【参考方案1】：SOLUTION
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-git1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<img class="animated" src="http://placehold.it/350x250"/>
</body>
</html>
JS
$(".animated").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function()
$(this).removeClass("wobble")
).hover(function()
$(this).addClass("wobble");
);
CSS
.wobble
animation-duration: 1s;
animation-fill-mode: both;
animation-name: wobble;
@keyframes wobble
0%, 100%
transform: none;
15%
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
30%
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
45%
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
60%
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
75%
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
【讨论】：
以上是关于当鼠标不再悬停在悬停动画上时，悬停动画会立即停止吗？的主要内容，如果未能解决你的问题，请参考以下文章