12

ローディング ホイールのアニメーション GIF を CSS アニメーションに置き換えます。

ここに基本的な例がありますhttp://jsfiddle.net/kFmY8/448/

#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(360deg);}
}

1 サイクルあたり 12 フレームだけになるようにフレーム レートを変更したいと考えています。これにより、アニメーションの流動性が失われ、置き換えられるアニメーション GIF とより密接に一致します。

これはできますか？

4

2 に答える 2

28

steps()の代わりにイージング機能に使用したいlinear。

http://jsfiddle.net/trolleymusic/uTd3x/

アニメーションの値を次のように変更しました:

-webkit-animation: rotation 2s infinite linear;

に：

-webkit-animation: rotation 2s infinite steps(12);

関数内の数字stepsは、アニメーションを分割するフレーム数です。

参考資料: http://css-tricks.com/snippets/css/keyframe-animation-syntax/ - 半分ほど下にSteps()というセクションがあります

于 2013-05-12T18:22:55.950 に答える