Остановить вращение анимации на CSS

Question

Мне нравится знать, как я могу плавно остановить анимацию вращения (css) в произвольном положении без нажатия кнопки.

span.glyphicon-arrow-up {
position: absolute;
top: 31%;
left: 36%;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation-iteration-count: 2;
animation:spin 2s linear infinite;
font-size: 14.0em;

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Я надеюсь, что вы, ребята, можете мне помочь. (я не знаю что-то о JavaScript)

Answer 1

Сначала создайте второй класс CSS, чтобы применить анимацию. Тогда используйте getComputedStyleрассчитать и установить вращение элемента и удалить класс анимации при запуске события. Как вы запускаете событие, зависит от вас; ради скорости и простоты, я просто использовалclickсобытие, но вы можете установить тайм-аут со случайно сгенерированной задержкой, чтобы запустить его без какого-либо взаимодействия с пользователем. Я также включил запасной вариант для браузеров, которые не поддерживаютtransform свойство, которое просто устанавливает его initial,

document.querySelector("div").addEventListener("click",function(){
  this.style.transform=window.getComputedStyle(this).getPropertyValue("transform")||"initial";
  this.classList.remove("spin");
});

div{
  background:#000;
  height:50px;
  width:50px;
}
.spin{
  animation:spin 2s linear infinite;
}
@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}
body,html{height:100%;}body{align-items:center;display:flex;justify-content:center;}

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

Обратите внимание, что я в настоящее время на машине, на которой не установлены браузеры, для которых по-прежнему требуется transform свойство с префиксом. В моих тестах префиксные свойства переводились в нефиксированные getComputedStyle но я не уверен, является ли это функцией этой функции или дело в том, что браузер не требует префиксной версии. Если вы заметили, что это не работает в браузерах, которые требуют transform чтобы иметь префикс, вам нужно будет предоставить дополнительные запасные варианты. Ниже приведена функция JavaScript, отредактированная для включения полного списка, который может вам потребоваться:

document.querySelector("div").addEventListener("click",function(){
  var style=window.getComputedStyle(this);
  this.style.transform=style.getPropertyValue("transform")||style.getPropertyValue("-webkit-transform")||style.getPropertyValue("-ms-transform")style.getPropertyValue("-moz-transform")||"initial";
  this.classList.remove("spin");
});