Javascript CSS3动画：如何从暂停位置动画到重置位置？

startPosition

位于

左侧：0%

使用切换按钮移动方框，然后在中间的某个位置暂停。
我想要实现的是将长方体从

暂停位置

设置为

开始位置

。我如何做到这一点

const
框={移动：假}
;
函数元素（id）{return document.getElementById（id）}
功能移动（元素）{
box.moving=true；
element.classList.add（'moving'）
}
功能停止（元件）{
box.moving=false；
element.classList.remove（'moving'）
}
函数切换框（）{
如果（！box.moving）{move（element（'box'））}
else{stop（元素（'box'））}
}
函数resetBox（）{
//我应该在这里写什么
}

@关键帧移动{
0%{左：0%}
100%{左：100%}
}
.盒子{
动画名称：移动；
动画延迟：0s；
动画持续时间：1s；
动画方向：交替；
动画填充模式：两者都有；
动画计时功能：线性；
动画迭代次数：无限；
动画播放状态：暂停；
显示：块；
高度：10px；
宽度：10px；
背景：#06f；
位置：绝对位置；
排名：0；
}
.搬家{
动画播放状态：运行；
}
.container{位置：相对；宽度：100px；边框：1px实心#6666；高度：10px；}

切换
重置

一种方法是读取动画的当前状态，删除动画，然后重置属性，然后它们将通过转换重新设置动画

我为动画添加了一个翻译以避免溢出：

const
方框={
感动：错
};
功能元素（id）{
返回文档.getElementById（id）
}
功能移动（元素）{
box.moving=true；
element.classList.add（'moving'）
}
功能停止（元件）{
box.moving=false；
element.classList.remove（'moving'）
}
函数切换框（）{
元素（'box'）。类列表。删除（'reset'））
如果（！box.moving）{
移动（元素（'box'））
}否则{
停止（元素（'box'））
}
}
函数resetBox（）{
元素（'box'）.style.left=window.getComputedStyle（元素（'box'），null）.getPropertyValue（“left”）；
元素（'box'）.style.transform=window.getComputedStyle（元素（'box'），null）.getPropertyValue（“transform”）；
元素（'box'）。类列表。添加（'reset'））
setTimeout（函数（）{
元素（'box'）。style.left=0；
元素（'box'）.style.transform=“translateX（0）”；
},1);
}

@关键帧移动{
0% {
左：0%
}
100% {
左：100%；
转化：translateX（-100%）；
}
}
.盒子{
动画：移动1s无限线性交替；
动画播放状态：暂停；
显示：块；
高度：10px；
宽度：10px；
背景：#06f；
位置：绝对位置；
排名：0；
左：0；
变换：translateX（0）；
过渡：0.5s全部；
}
.重置{
动画：无；
}
.搬家{
动画播放状态：运行；
}
.集装箱{
位置：相对位置；
宽度：100px；
边框：1px实心#6666；
高度：10px；
}

切换
重置