I have a css like this:

#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;
}

Also I have my JS-code which listening to the ckick event and toggling between .burning-pause and .burning-run classes.

The animation-play-state prop has only two states, such as pause and running. So it hasn't any stop anim values.

So the question is how to stop the animftion when click and return it to the 1st frame?

CodePudding user response：

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>