У меня есть следующий HTML:
<div class="rotate"></div>
И следующий CSS:
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
}
}
.rotate {
width: 100px;
height: 100px;
background: red;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Я хочу знать, есть ли способ (с использованием JavaScript) остановить анимацию, но пусть она закончит свою текущую итерацию (желательно, изменив один или несколько свойств CSS). Я попытался установить -webkit-animation-name
на пустое значение, но это заставляет элемент возвращаться к исходному положению в резком порядке. Я также попытался установить -webkit-animation-iteration-count
на 1
, но это делает то же самое.