滑らかなアニメーションの停止

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 WITHソリューションを使用することができますここで議論する： Stopping a CSS animation but letting its current iteration finish