Html 鼠标不再悬停在悬停动画上时，悬停动画会立即停止吗？_Html_Css_Animation_Hover

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

html css animation

Html 鼠标不再悬停在悬停动画上时，悬停动画会立即停止吗？,html,css,animation,hover,Html,Css,Animation,Hover,我有一个图像，它有一个摆动动画，当鼠标悬停在它上面时会被激活，并且应该持续大约一秒钟。如果鼠标停留在图像上，它将完美地工作并持续该时间长度。但是，如果我将鼠标从图像上移开，它会回缩到位，并且不会完成动画。我怎样才能让它继续动画，然后像鼠标悬停在它上面那样停止呢 HTML: HTML <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-git1.js">

我有一个图像，它有一个摆动动画，当鼠标悬停在它上面时会被激活，并且应该持续大约一秒钟。如果鼠标停留在图像上，它将完美地工作并持续该时间长度。但是，如果我将鼠标从图像上移开，它会回缩到位，并且不会完成动画。我怎样才能让它继续动画，然后像鼠标悬停在它上面那样停止呢

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>

CSS

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

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

}

你对jquery有意见吗？这是一个副本---它提供了一个javascript和一个css解决方案（未经确认）。也与-基本上是同一个问题，似乎没有使用纯css的解决方案。我尝试了第一个链接，代码有很大不同。我对JavaScript了解不够，无法将其添加到我的代码中。

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

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

}