CSS旋轉輪5秒後停止？

Question

我使用這個CSS代碼，我發現小提琴旋轉我的車輪：

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); 
    } 
} 

基本上我想阻止它達到1800個輩分正好經過紡紗，然後回到0，所以我可以稍後再旋轉它。

這可能嗎？

Answer 1

您可以適當地設置animation-iteration-count。

1800度= 5個整圈（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; 

應該自動完成時復位爲0。

This documentation might give some more context。

編輯

Updated your jsFiddle。注意，你應該考慮在其中包含-o-animation項目，以防他們擁有Opera v12。另外，請考慮速記。

-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;