Smoothly transition from midway through CSS animation to start (or end) - css

Question

I have a box that spins on click:
.box{
width: 200px;
height: 200px;
background:red;
transition: all 1s;
}
.box.spin{
animation: spin 5s infinite linear;
}
When you click it a second time, I'd like it to either unspin, or complete its spin to come to a halt. It seems that instead it snaps immediately back to its starting position:
https://codepen.io/EightArmsHQ/pen/OaoPKm?editors=0100
Is there a way of achieving this without replacing the animation with a transition?

Answer 1

What about use animation-play-state property ?
.box{
animation: spin 5s infinite linear; // add this here
animation-play-state: paused; // pause animation by default
}
.box.spin{
animation-play-state: running; // play animation
}
https://codepen.io/frantisekvrab/pen/YROXaZ
If you like to complete the spin, I assume you have to use some more JS or CSS transition.

Answer 2

By "unspin" do you mean to have it spin in the other direction? If so, you can do something like this:
window.onload = ()=>{
let box = document.querySelector('.box');
box.addEventListener('click', function(){
this.classList.toggle('spin')
this.classList.toggle('spin-reverse')
});
}
#keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
html, body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
cursor: pointer;
width: 200px;
height: 200px;
background:red;
transition: all 1s;
box-sizing: border-box;
color: #fff;
display: flex;
padding: 30px;
text-align: center;
align-items: center;
justify-content: center;
user-select: none;
}
.box.spin{
animation: spin 5s infinite linear;
}
.box.spin-reverse {
animation: spin 5s infinite linear reverse;
}
<div class="box spin" id="box">
Click to toggle animation
</div>
Also, here's a working example :)