Css 如何在点击时停止动画并将其返回到第一帧

发布于11月05日

我有一个这样的css:

#turbo_fire {
  transform-box: fill-box;
  position: absolute;
  animation-name: burning;
  animation-duration: .005s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}
.burning-pause {
  animation-play-state: paused;
}
.burning-run {
  animation-play-state: running;
}

我还有我的JS代码，它可以监听ckick事件，并在.burning-pause和.burning-run类之间切换.

animation-play-stateprops 只有两种状态，如pause和running.所以它没有任何停止动画值.

因此，问题是如何在click帧时停止动画，并将其返回到第一帧？

推荐答案

There is no real problem for resetting an animation on first position.
I'm wondering in which kind of confusion you set yourself,
-because this is not a problem,
-and you didn't take any second for answering my comment; even just a 'no'.

const btn = 
  { Xanim  : document.querySelector('#btn-anim')
  , Xpause : document.querySelector('#btn-pause')
  , Xrun   : document.querySelector('#btn-run')
  , Xreset : document.querySelector('#btn-reset')
  }

setBtnsOff( false,true,true,true );

btn.Xanim.onclick =_=> 
  { 
  bob.classList.add('anim');
  setBtnsOff( true,false,true,false );
  }
btn.Xpause.onclick =_=>
  {
  bob.classList.remove('movin-run'); 
  bob.classList.add('movin-pause');
  setBtnsOff(true,true,false,false);
  }
btn.Xrun.onclick =_=>
  {
  bob.classList.replace('movin-pause','movin-run'); 
  setBtnsOff(true,false,true,false);
  }
btn.Xreset.onclick =_=>
  {
  bob.classList.remove('anim','movin-pause','movin-run');
  setBtnsOff( false,true,true,true );
  }
 
function setBtnsOff( x_anim, x_pause, x_run, x_reset  )
  {
  btn.Xanim .disabled = x_anim;
  btn.Xpause.disabled = x_pause;
  btn.Xrun  .disabled = x_run;
  btn.Xreset.disabled = x_reset;
  }

#bob {
  margin  : 20px;
  width         : 100px;
  height        : 100px;
  background    : darkorange;
  border-radius : 50px;
  }
.anim {
  animation-name            : movin;
  animation-duration        : 2s;
  animation-timing-function : linear;
  animation-iteration-count : infinite;
  }
@keyframes movin {
    0% { transform: translateX(0); }
   50% { transform: translateX(300px); }
  100% { transform: translateX(0); }
  }

.movin-pause {
  animation-play-state: paused;
  }
.movin-run {
  animation-play-state: running;
  }

button { width : 5em; }

<button id="btn-anim"  > mov it </button>
<button id="btn-pause" > pause  </button>
<button id="btn-run"   > run    </button>
<button id="btn-reset" > reset  </button>

<div id="bob"></div>