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

У меня есть следующий 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, но это делает то же самое.

Ответы

Ответ 1

Остановите анимацию после получения события animationiteration. Что-то вроде этого (используя jQuery):

CSS

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
}
.rotate.anim {
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}

HTML

<div class="rotate anim">TEST</div>
<input id="stop" type="submit" value="stop it" />

JS (JQuery)

$("#stop").click(function() {
    $(".rotate").one('animationiteration webkitAnimationIteration', function() {
        $(this).removeClass("anim");
    });
});

Fiddle: http://jsfiddle.net/sSYYE/1/

Обратите внимание, что я использую .one здесь (не .on), так что обработчик работает только один раз. Таким образом, анимация позже может быть перезапущена.

Ответ 2

Вы хотите, чтобы анимация останавливалась там, где она заканчивается, не возвращаясь в исходное положение?

Затем вы хотите:

Анимируйте что-то, перемещающееся из одного места в другое, и оставайтесь там: анимация-фасовочно-режим: вперед;

проверьте эту ссылку:

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp