매끄러운 애니메이션 중지

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