Zatrzymanie animacji CSS, ale pozwalając jej aktualna iteracja zakończyć

Question

Mam następujące HTML:

<div class="rotate"></div>​ 

i następujący 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; 
}​ 

Chcę wiedzieć, czy istnieje sposób (przy użyciu JavaScript), aby zatrzymać animację, ale pozwól jej zakończyć aktualną iterację (najlepiej zmieniając jedną lub kilka właściwości CSS). Próbowałem ustawić -webkit-animation-name, aby mieć pustą wartość, ale to powoduje, że element przeskakuje z powrotem do pierwotnej pozycji w sposób wstrząsający. Próbowałem również ustawić -webkit-animation-iteration-count na 1, ale to samo.

Answer 1

Zatrzymaj animację po otrzymaniu zdarzenia animationiteration. Coś jak to (przy użyciu 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"); 
    }); 
}); 

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

Proszę zauważyć, że używam tutaj .one (a nie .on), aby przewodnik obsługiwał tylko jeden raz. W ten sposób animacja może zostać ponownie uruchomiona.

Answer 2

Czy chcesz, aby animacja zatrzymała się w miejscu, w którym kończy się, nie przeskakując z powrotem do pierwotnej pozycji?

Następnie chcesz:

Animacja coś przemieszczających się z jednego miejsca do drugiego i to się tam: animacji-fill-mode: do przodu;

Sprawdź ten link:

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