Плавный переход от середины через CSS-анимацию к началу (или концу)

Question

У меня есть коробка, которая вращается при нажатии:

.box{
  width: 200px;
  height: 200px;
  background:red;
  transition: all 1s;
}

.box.spin{
  animation: spin 5s infinite linear;
}

Когда вы нажимаете на нее во второй раз, я бы хотел, чтобы она или развернулась, или завершила вращение, чтобы остановиться.Кажется, вместо этого он сразу же возвращается в исходное положение:

https://codepen.io/EightArmsHQ/pen/OaoPKm?editors=0100

Есть ли способ достичь этого без замены анимации переходом?

Answer 1

Под "вращением" вы подразумеваете, что оно вращается в другом направлении?Если это так, вы можете сделать что-то вроде этого:

window.onload = ()=>{
  let box = document.querySelector('.box');
  box.addEventListener('click', function(){
    this.classList.toggle('spin')
    this.classList.toggle('spin-reverse')
  });
}

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

html, body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box{
  cursor: pointer;
  width: 200px;
  height: 200px;
  background:red;
  transition: all 1s;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  padding: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.box.spin{
  animation: spin 5s infinite linear;
}

.box.spin-reverse {
  animation: spin 5s infinite linear reverse;
}

<div class="box spin" id="box">
  Click to toggle animation
</div>

Также, вот рабочий пример :)

Answer 2

Как насчет использования свойства animation-play-state?

.box{
  animation: spin 5s infinite linear; // add this here
  animation-play-state: paused; // pause animation by default
}

.box.spin{
  animation-play-state: running; // play animation
}

https://codepen.io/frantisekvrab/pen/YROXaZ

Если вы хотите завершить вращение, я предполагаю, что вам нужно использовать еще несколько JS или CSS-переходов.