CSS旋转轮停止5秒？ [英] CSS spinning wheel stop after 5 seconds?

问题描述

我使用这个CSS代码7 /> 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）; 
} 
} 
  

基本上我想停止旋转，

这是可能吗？

解决方案

您可以恰当地设置 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.

此文档可能会提供一些更多上下文。

EDIT

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

I am using this CSS code I found on fiddle to spin my wheel:

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

Basically I want to stop the spinning exactly after it reaches 1800 Degress, and then go back to 0 so I can spin it again later.

Is that possible to do?

解决方案

You can just set the animation-iteration-count appropriately.

1800 degrees = 5 full rotations (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;

It should automatically reset to 0 upon completion.

This documentation might give some more context.

EDIT

Updated your jsFiddle. Side note, you should consider including -o-animation items in there as well, in case they have Opera v12. Also, consider shorthand.

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

这篇关于CSS旋转轮停止5秒？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！