实现原理也很简答,CSS 0%~100% 需要10s ,然后再来个animation-iteration-count: infinite;无限循环就可以了~~~~
<code>@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#libox {
-moz-animation-name: rotate;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</code>
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#libox {
-moz-animation-name: rotate;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</code>