当鼠标不再悬停在悬停动画上时，悬停动画立即停止？

Question

I have an image that has a wobble animation that is activated when the mouse hovers over it and is supposed to last for about a second. 我有一个具有摆动动画的图像，当鼠标悬停在它上面并且应该持续大约一秒时，它会被激活。 If the mouse stays on the image, it works perfectly and goes for that length of time. 如果鼠标停留在图像上，它可以完美地工作并持续一段时间。 However, if I move the mouse away from the image, it jerks back in place and doesn't finish the animation. 但是，如果我将鼠标移离图像，它会回到适当位置并且不会完成动画。 How can I get it to continue the animation and then stop like it would if the mouse was still hovering over it? 我怎样才能让它继续动画然后像鼠标悬停在它上面一样停下来？

HTML: HTML：

<img class="animated wobble" src="image/elephant.png"/>

CSS: 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;
}

Answer 1

SOLUTION 解

HTML 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 JS

$(".animated").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("wobble")  
}).hover(function(){
  $(this).addClass("wobble");        
});

CSS 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);
  }

}

当鼠标不再悬停在悬停动画上时，悬停动画立即停止？

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-30 14:48:33

当鼠标不再悬停在悬停动画上时，悬停动画立即停止？

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-30 14:48:33

解决方案1
0 已采纳 2014-07-30 14:48:33