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;