Javascript CSS-类添加/删除上的转换动画

我正在尝试将转换设置为作为动画一部分应用的变换。在这里，我添加了一个类来启动/停止动画关键帧。单击按钮以停止旋转时，它将捕捉回开始帧

是否可以让它完成旋转或平滑地回滚到其开始状态

var-toggle2d=document.getElementById（'toggle-2d'）；
var plain=document.querySelector（'.plain'）；
toggle2d.onclick=（）=>{
plain.classList.toggle（'animate-2d'）；
}

.plain{
最高：50%；
左：50%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
}
.轨道{
宽度：200px；
高度：200px；
边框：1px纯黑；
边界半径：50%；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
位置：绝对位置；
变换样式：保留-3d；
过渡：所有1s线性；
}
.身体{
宽度：30px；
高度：30px；
背景颜色：棕色；
边界半径：50%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
变换样式：保留-3d；
}
.动画-2d.动态观察{
过渡：所有1s线性；
动画：环绕cw无限线性；
动画持续时间：5s；
动画填充模式：两者都有；
}
@关键帧顺时针旋转{
100% {
变换：旋转（360度）；
}
}

切换2d

您可以使用

animationiteration

事件来实现这一点

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');
    }
});