CSS3連続回転アニメーション（読み込み中の日時計と同じ）

120

私は、PNGおよびCSS3アニメーションを使用して、Appleスタイルのアクティビティインジケーター（サンディングロードアイコン）を複製しようとしています。画像を回転させて継続的に実行していますが、アニメーションが終了してから次の回転を行うまでに遅延があるようです。

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

私はアニメーションの期間を変更しようとしましたが、違いはありません。すぐに遅くした場合、5秒と言うのは、最初の回転の後、再び回転する前に一時停止があるということです。それは私が取り除きたいこの一時停止です。

助けてくれてありがとう、ありがとう。

— Gcoop
ソース

14

Webkit固有のコードによってCSS3が減ることはありません。他のどのプロバイダーもその時点で同等の機能を提供していなかったことを考えると:)

— 19h

4

アニメーションは0から359まで実行すべきではありませんか？それは360から0から実行した場合、あなたはフレーム0とフレーム360が同じになるため、二回演奏さ0のフレームを持っていると思います...

— ブラッド・パークス

1

@BradParks一方、0から359に移動すると、359.5で発生するはずのアニメーションが完全にスキップされます。ほとんどの場合、0と360のオーバーラップは非常に速く、気付かれないほどです。

— Blazemonger 2013

@Blazemongerとは限りません。jsfiddleで自分で試してみると、アニメーションの継続時間によってはそれほど微妙ではない場合があります。

— Ilan Biala 2014年

1

この「359度」全体はばかげています。アニメーションのステップを制御することはできません。フレームあたり6度である60fpsの1秒のアニメーションを想定しているため、「354度」で停止する必要があります。しかし、私が言ったように、ここではフレームレートを制御できないため、かなり無駄です。スマートな実装で0〜360を検出し、それに応じて調整できると思います。時間と角度に100を掛けただけです。0度から36000度なので、理論上のグリッチは100回転ごとにのみ発生します。とにかく、どうしてもアニメーションの不具合が発生することに

— 気づきまし

71

ここでの問題は、必要な-webkit-TRANSITION-timing-functionときにを指定したことです-webkit-ANIMATION-timing-function。0〜360の値は適切に機能します。

— 不規則
ソース

典型的なコピー貼り付けエラー。どうもありがとう！（私は実際にはcssをshareaholicから取得しましたが、プロパティの名前が間違っているため、デフォルトのeaseタイミング関数を使用していました）。

— doekman

55

また、0degと360degは同じスポットであるため、少し遅れに気付くかもしれません。円のスポット1からスポット1に戻ります。これは重要ではありませんが、修正するには、360degを次のように変更するだけです。 359deg

私のjsfiddleはあなたのアニメーションを示しています：

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

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

また、リンゴの読み込みアイコンに似ているのは、アイコンを回転させるのではなく、灰色の縞の不透明度/色を変化させるアニメーションでしょう。

— イラン・ビアラ
ソース

3

JS Fiddleには、単純な画像回転のために私が見た中で最も簡潔な実装が含まれています-完璧です（そして投稿に感謝します）。

— フィリップマーフィー

他のヘルプが必要な場合はお知らせください。ちなみに、アニメーションにはwebkitプレフィックスを使用しましたが、代わりに-moz-cssルールを使用しているため、mozillaプレフィックスも含める必要があります。

— Ilan Biala 2013

時間と角度に100を掛けることもできます。0度から36000度:-)

— Simon_Weaver

ダブルフレームが表示されないようにするには、@ Simon_Weaverを35999degにする必要があります。

— Ilan Biala 2014年

2

@IlanBialaを除いて、グラフィックカードが720fpsで動作していることは間違いありません;-)フレームレートを知らない限り、フレーム間の増分を知ることはできません。60fpsで0.5秒にすると、各フレームは12度進むので、どちらかと言えば348度とすることもできます。私はむしろ360を置くだけで、誰かがブラウザを自動的に調整するようにスマートにプログラムしたいと思っています

— Simon_Weaver

27

次のようなアニメーションを使用できます。

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

— キングリーバード
ソース

2

素晴らしくて簡単な解決策！

— TheLD 2014年

8

あなたが唯一のWebKitのバージョンを探しているなら、これは気の利いたです：http://s3.amazonaws.com/37assets/svn/463-single_spinner.htmlからhttp://37signals.com/svn/posts/2577-loading- spinner-animation-using-css-and-webkit

— チューダー
ソース

9

とてもかっこいい。との両方のスピナーを実際に収集GIFしCSSます。私のコレクション。詳しくはお知らせください。

— doekman

1

あなたのコードは正しいようです。私はあなたが.pngを使用しているという事実と関係があり、ブラウザが回転時にオブジェクトを再描画する方法が非効率的でハングを引き起こしていると思います（どのブラウザでテストしていますか？）

可能であれば、.pngをネイティブなものに置き換えます。

見る; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chromeでは、この方法を使用しても一時停止しません。

— アレックス
ソース

完璧、あなたの仮定は正しいと確信していますが、私の読み込みアイコンは日時計ではなく、その核のスタイルのシンボルではないので、PNGを使用しています...必ずしもそうである必要はありません。提案-ありがとう！

— Gcoop

1

画像なしで簡単にドキドキできる小さなライブラリを作りました。

CSS3を使用しますが、ブラウザーがサポートしていない場合はJavaScriptにフォールバックします。

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

例。

— アレックス
ソース