Transition from animation?

Question

So I have a field .box. This endlessly repeats the rotation animation.

@keyframes spin {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

Animation applies only when the second class name is run.

.box.running {
  animation-name:spin;

The purpose of this is that I can easily stop the animation using javascript. (removing the middle name of the class.)

I would like for him to smoothly move from where he is in the animation, back to the normal rotation that is now located 0deg.

Any help would be greatly appreciated.

Answer 1

CSS. JS . : , div spin (.spin), - (.end). @keyframes, .

• .spin
• .end 0,5

, JS script ( ) .end div, .spin animation .ends, div .

var a = function() {

  document.querySelector('.box').setAttribute('class', 'box spin end')

}

document.querySelector('#end').onclick = function() {
  a()
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-fill-mode: backwards;
}

.spin {
  animation: spin 2s infinite linear;
}

.end {
  animation: spin 2s 0.5s linear;
}

<div class="box spin"></div>

<br>

<button id="end">STOP SPIN</button>

Hide result

animation-fill-mode .box backwards