悬停时的 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/