css - 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。

该文档可能会提供更多上下文。

编辑

更新了你的 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;