平滑動畫停止

Question

當複選框被選中時，div正在跳躍。當您取消選中複選框時，div會立即移至初始位置。

是否可以順利地完成最後一個動畫迭代，並且在僅使用沒有JS的CSS之後停止？

#jumping-div { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: 100px; 
 
    background-color: red; 
 
} 
 
@keyframes jump { 
 
    0% { 
 
    transform: scaleY(1) translateY(0); 
 
    } 
 
    50% { 
 
    transform: scaleY(0.8) translateY(-70%); 
 
    } 
 
} 
 
#toggle:checked ~ #jumping-div { 
 
    animation-name: jump; 
 
    animation-duration: 2.0s; 
 
    animation-iteration-count: infinite; 
 
}

<input type="checkbox" id="toggle"><label for="toggle">jump</label> 
 
<div id="jumping-div"></div>

Answer 1

它不可能沒有JS。 你可以用CSS做的是，動畫將通過取消選中該複選框被暫停，如果你再勾選繼續：

#toggle:checked ~ #jumping-div { 
    animation-play-state:running; 
} 

#jumping-div { 
    animation-play-state:paused; 
    animation-name: jump; 
    animation-duration: 2.0s; 
    animation-iteration-count: infinite; 
} 

如果你想完成的動畫，你可以使用與JS，這是該解決方案這裏討論： Stopping a CSS animation but letting its current iteration finish