javascript - CSS3 动画 : How to animate to from paused position to reset position?

Question

startPosition 位于 left:0%
使用切换按钮移动方框，然后在中间某处暂停。
我想要实现的是将框从 paused position 动画化到 start position。我该如何实现？

const
box={moving:false}
;
function element(id){return document.getElementById(id)}
function move(element){
  box.moving=true;
  element.classList.add('moving')
  }
function stop(element){
  box.moving=false;
  element.classList.remove('moving')
  }
function toggleBox(){
  if(!box.moving){move(element('box'))}
  else{stop(element('box'))}
  }
function resetBox(){
  // what should i write here
  }

@keyframes moving{
0%{left:0%}
100%{left:100%}
}

.box{
animation-name:moving;
animation-delay:0s;
animation-duration:1s;
animation-direction:alternate;
animation-fill-mode:both;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-play-state:paused;
display:block;
height:10px;
width:10px;
background:#06f;
position:absolute;
top:0;
}

.moving{
animation-play-state:running;
}

.container{position:relative;width:100px;border:1px solid #6666;height:10px;}

<p>
<button onclick="toggleBox()">Toggle</button>
<button onclick="resetBox()">Reset</button>
</p>
<div class="container">
<span id="box" class="box"></span>
</div>

Answer 1

一个想法是读取动画的当前状态，删除动画然后重置属性，它们将通过过渡动画返回。

我在动画中添加了翻译以避免溢出:

const
  box = {
    moving: false
  };

function element(id) {
  return document.getElementById(id)
}

function move(element) {
  box.moving = true;
  element.classList.add('moving')
}

function stop(element) {
  box.moving = false;
  element.classList.remove('moving')
}

function toggleBox() {
   element('box').classList.remove('reset')
  if (!box.moving) {
    move(element('box'))
  } else {
    stop(element('box'))
  }
}

function resetBox() {
   element('box').style.left=window.getComputedStyle(element('box'), null).getPropertyValue("left");
   element('box').style.transform=window.getComputedStyle(element('box'), null).getPropertyValue("transform");
   element('box').classList.add('reset')
   setTimeout(function(){
    element('box').style.left=0;
    element('box').style.transform="translateX(0)";
   },1);
}

@keyframes moving {
  0% {
    left: 0%
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

.box {
  animation: moving 1s infinite linear alternate;
  animation-play-state: paused;
  display: block;
  height: 10px;
  width: 10px;
  background: #06f;
  position: absolute;
  top: 0;
  left:0;
  transform:translateX(0);
  transition:0.5s all;
}
.reset {
  animation:none;
}

.moving {
  animation-play-state: running;
}

.container {
  position: relative;
  width: 100px;
  border: 1px solid #6666;
  height: 10px;
}

<p>
  <button onclick="toggleBox()">Toggle</button>
  <button onclick="resetBox()">Reset</button>
</p>
<div class="container">
  <span id="box" class="box"></span>
</div>