我正在使用我在小提琴上找到的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 Degress后完全停止旋转,然后回到0,这样我可以稍后旋转它。
这可能吗?
答案 0 :(得分: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。注意,如果他们有Opera v12,你应该考虑在那里加入-o-animation
个项目。另外,请考虑速记。
-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;