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/

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

1 个答案: