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

Question

startPosition is at left:0%
Move the box using the toggle button, then pause somewhere into the middle.
What I want to achieve is animating the box from the paused position to the start position . How do I achieve that?

 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

An idea is to read the current state of the animation, remove the animation then reset the properties and they will animate back with a transition.

I added a translation to the animation to avoid the overflow:

 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> 

Answer 2

You can "hack" through it by setting its animation-name to none first and then revert it at the next frame.

The animation state will be reset.

 constbox = { 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() { let name = element('box').style.animationName; element('box').style.animationName = 'none'; setTimeout(() => element('box').style.animationName = name, 0); } 

 @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>