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