2
.side {
  margin: 150px auto;
  width: 400px;
  height: 200px;
  animation: rotate 10s infinite linear;
  transform-origin: 50% 50%;
}

@keyframes rotate {
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes rotate2 {
  100% {
    transform: rotateY(360deg);
  }
}
3
  • можно убрать класс через JS и поставить новый, с правильной анимацией и стилями в целом.
    – NeedH8
    2 июн 2017 в 8:40
  • также, как вариант object.style.animation = "rotate2 10s infinite linear"; Но, с заменой класса, думаю действительно лучше. 2 июн 2017 в 8:44
  • @NeedHate, вариант со сменой класса был тут ru.stackoverflow.com/a/674036/221753 , но он, видимо, не подошел
    – br3t
    2 июн 2017 в 8:51

1 ответ 1

2

Через Element.style.animationName.

document.querySelector('button').onclick = function() {
  document.querySelector('.side').style.animationName = "rotate2";
}
.side {
  margin: 50px auto;
  width: 400px;
  height: 200px;
  background-color: #ccc;
  animation: rotate 10s infinite linear;
  transform-origin: 50% 50%;
}

@keyframes rotate {
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes rotate2 {
  100% {
    transform: rotateY(360deg);
  }
}
<div class="side"></div>

<button>change animation</button>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.