Arrêter l'animation en douceur

Question

Lorsque la case est cochée, le div saute. Lorsque vous décochez la case - le div se déplace immédiatement à la position initiale.

Est-il possible de terminer la dernière animation en douceur et de ne plus utiliser que CSS sans JS?

#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

Il est impossible sans JS. Qu'est-ce que vous pouvez faire avec CSS est que l'animation sera mise en pause en décochant la case à cocher et continue si vous cochez la case à nouveau:

#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; 
} 

Si vous voulez terminer l'animation vous pouvez utiliser la solution JS qui était discuté ici: Stopping a CSS animation but letting its current iteration finish