鼠標懸停時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/