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

私が現在持っているものは正方形の回転をしますが、それは常に1回転後に停止し、その後すぐに開始します。停止せずに継続的に回転させるにはどうすればよいですか？

NB私は@-webkit-keyframes、@-moz-keyframesおよび@-ms-keyframesを使用しています。

どうもありがとう、

ルーカス

4

2 に答える 2

6

アニメーションの定義とは関係ありませんが、その使用法とは関係ありません。

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

infiniteキーワードはあなたが必要とするものです。そこに整数を入れて、回転サイクルの数を有限にすることもできます。

OPによる編集：将来の訪問者のために、linearキーワードは、スイングアニメーションを使用してアニメーションを高速化してから減速するのではなく、線形で滑らかなアプローチを使用して、速度が分散され、正方形がに表示されないようにすることです。止まる。このキーワードは私にとって重要なものでした-私はinfiniteすでにキーワードを持っていました。

http://jsfiddle.net/GXPS8/

于 2012-04-07T07:33:23.957 に答える
1

私の推測では、既存のコードは360度回転し、次に0度回転し、次に再び360度回転します。

停止は、アニメーションが同じ回転を2回レンダリングしていることが原因である可能性があります（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
}

Pure CSSでは、継続的に359度に回転するように設定することで、重複した回転がレンダリングされないようにすることができる場合があります。

于 2012-04-07T03:31:15.837 に答える