Zatrzymanie koła CSS po 5 sekundach?

Question

Używam tego kodu CSS znalazłem na skrzypcach spin moje kołowe:

http://jsfiddle.net/gaby/9Ryvs/7/

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 4000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spin; 
    -moz-animation-duration: 4000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spin; 
    -ms-animation-duration: 4000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 

    animation-name: spin; 
    animation-duration: 4000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@-ms-keyframes spin { 
    from { -ms-transform: rotate(0deg); } 
    to { -ms-transform: rotate(360deg); } 
} 
@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    from { 
     transform:rotate(0deg); 
    } 
    to { 
     transform:rotate(360deg); 
    } 
} 

Zasadniczo chcę zatrzymać przędzenie dokładnie po osiągnięciu 1800 degress, a następnie wrócić do 0 tak Mogę go później zakręcić.

Czy można to zrobić?

Answer 1

Możesz po prostu ustawić odpowiednio animation-iteration-count.

1800 stopni = 5 pełnych obrotów (5 * 360)

-webkit-animation-iteration-count:5; 
-moz-animation-iteration-count:5; 
-ms-animation-iteration-count:5; 
-o-animation-iteration-count:5; 
animation-iteration-count:5; 

powinien on automatycznie kasowany na 0 po zakończeniu.

This documentation might give some more context.

EDIT

Updated your jsFiddle. Boczna uwaga, powinieneś rozważyć umieszczenie tam również elementów -o-animation, na wypadek gdyby posiadały one Operę v12. Ponadto zastanów się nad skrótem.

-webkit-animation:spin 4000ms linear 0s 5; 
-moz-animation:spin 4000ms linear 0s 5; 
-ms-animation:spin 4000ms linear 0s 5; 
-o-animation:spin 4000ms linear 0s 5; 
animation:spin 4000ms linear 0s 5;