Остановка анимации CSS, но позволяя ее текущей итерации закончить ⇐ CSS

[Anonymous]

У меня есть следующий html: < /p>

Код: Выделить всё

​
< /code>

и следующие css: < /p>

@-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;
}​
< /code>

Я хочу знать, есть ли способ (используя JavaScript), чтобы остановить анимацию, но пусть она завершит свою текущую итерацию (предпочтительно, изменяя один или несколько свойств CSS). Я попытался настроить -Вет-animation-name 

, чтобы иметь пустое значение, но это заставляет элемент возвращаться к своему первоначальному положению в резкой манере. Я также попытался настройка -Вебкит-анимация-count-count до 1 , но это делает то же самое.

Подробнее здесь: https://stackoverflow.com/questions/130 ... ion-finish