CSS - transition animation on class add/remove

Question

I'm trying to set a transition to a transform that is applied as part of a animation. In this codepen example and inline here, I'm adding a class to start/stop the animation keyframes. When the button is clicked to stop the rotation, it snaps back to the start frame.

Is it possible to have it either complete the rotation or smoothly roll back to it's start state?

 var toggle2d = document.getElementById('toggle-2d'); var plain = document.querySelector('.plain'); toggle2d.onclick = () => { plain.classList.toggle('animate-2d'); } 

 .plain { top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; position: absolute; } .orbit { width: 200px; height: 200px; border: 1px solid black; border-radius: 50%; display: flex; align-items: center; justify-content: flex-end; position: absolute; transform-style: preserve-3d; transition: all 1s linear; } .body { width: 30px; height: 30px; background-color: brown; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; } .animate-2d .orbit { transition: all 1s linear; animation: orbit-cw infinite linear; animation-duration: 5s; animation-fill-mode: both; } @keyframes orbit-cw { 100% { transform: rotateZ(360deg); } } 

 <button type="button" id="toggle-2d">toggle 2d</button> <div class="plain"> <div class="orbit"> <div class="body"> </div> </div> </div> 

Answer 1

You can use the animationiteration event to achieve this.

var stopRequested = false;

toggle2d.onclick = () => {
    stopRequested = !stopRequested;
    if(!stopRequested) {
        plain.classList.add('animate-2d');
    }
}

plain.addEventListener("animationiteration", function(){
    if(stopRequested){
        plain.classList.remove('animate-2d');
    }
});