1

我想使用 html 和 css 创建一个不停旋转的正方形。我目前有：

@-webkit-keyframes spinnow {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinnow {
    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes spinnow {
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

我目前所得到的将使方形旋转，但它总是会在旋转一整圈后停止，然后很快就会开始。如何让它不断旋转而不停止？

注意我正在使用@-webkit-keyframes、@-moz-keyframes 和@-ms-keyframes。

非常感谢，

卢卡斯

4

2 回答 2

6

It has nothing to do with the definition of the animation, but with its usage:

.foo {
    animation: 5s spinnow infinite linear;
}

The infinite keyword is what you need. You can also put an integer there, to have a finite number of rotation cycles.

Edit by OP: For future visitors, the linear keyword is to make the animation not speed up and then slow down using the swing animation, but rather use a linear, smooth approach, so that the speed is distributed and does not make the square appear to stop. This keyword was the important one for me - I had the infinite keyword already.

http://jsfiddle.net/GXPS8/

于 2012-04-07T07:33:23.957 回答
1

我的猜测是现有代码先旋转 360 度，然后旋转 0 度，然后再旋转回 360 度。

您感知到的停止可能是由于动画渲染了两次相同的旋转（360 度 = 0 度）。

编辑：不是 OP 试图做的纯 HTML+CSS，但它可以解决流动性问题。

通过与此类似的公式计算要执行的旋转量应该可以解决问题：

var rotation=0;
...
function _RotateStep(){
    rotation=(rotation+1)%360;
    //apply rotation to element (via method of choice)
    setTimeout("_RotateStep()",250); //or time between rotation steps of your choice
}

在纯 CSS 中，您可以将其设置为连续旋转 359 度，从而消除渲染的重复旋转。

于 2012-04-07T03:31:15.837 回答