jquery - 鼠标悬停时的 css 动画不会在鼠标离开时顺利结束

Question

我有多个 <svg> (!!!) 绝对定位的元素，初始参数 left:0和 top:0 , 和一个 div称为 btn .当我悬停 btn ，我通过 jQuery 在这些 svg 上设置动画元素如

$("#btn").hover(
    function(){
      $(this).parent().parent().find(".svg-circle").attr("class", "svg-circle zoomy");
    }, 
    function(){
      $(this).parent().parent().find(".svg-circle").attr("class", "svg-circle");
    });

这些是CSS类

.svg-circle{
  position: absolute;
  z-index: 99;
  transition: filter 300ms ease-in-out;
}
.zoomy{
  animation-name: pulse_anim;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes pulse_anim{
  0% { transform: scale(1); }
  10% { transform: scale(1.0.3); }
  20% { transform: scale(0.94); }
  30% { transform: scale(1.05); }
  40% { transform: scale(0.98); }
  50% { transform: scale(1.03); }
  60% { transform: scale(1); }
  70% { transform: scale(0.98); }
  80% { transform: scale(1); }
  80% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

这些会在这些 svg 上触发漂亮的脉冲动画元素，但我一离开btn用我的鼠标，svg元素立即缩放到初始大小，没有平滑过渡。有没有办法告诉动画它已经结束并且应该平滑过渡到初始大小？

https://jsfiddle.net/qrw1fgh8/

Answer 1

也许你可以使用动画 animation-play-state 属性来暂停你的动画:

.svg-circle{
  position: absolute;
  z-index: 99;
  transition: filter 300ms ease-in-out, transform 1s;
  animation-name: pulse_anim;
  animation-duration: 4000ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.zoomy{
  animation-play-state: running;
}

https://jsfiddle.net/bgqz1h81/