web-dev-qa-db-ja.com

CSS3連続回転アニメーション（ローディング日時計のように）

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

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

どんな助けも大歓迎です、ありがとう。

cssanimationwebkitcss3transform
120
Gcoop

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

71
rrahlf

また、0degと360degは同じスポットであるため、少し遅れていることに気付くかもしれません。そのため、円のスポット1からスポット1に戻ります。 359度

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

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

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

また、Apple読み込みアイコンに似ているのは、アイコンを回転させる代わりに灰色のストライプの不透明度/色を遷移させるアニメーションです。

53
Ilan Biala

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

-webkit-animation: spin 1s infinite linear;

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

Webkitバージョンのみを探している場合、これは気の利いたものです。 http://s3.amazonaws.com/37assets/svn/463-single_spinner.html from http：// 37signals .com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

8
Tudor

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

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

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

この方法を使用すると、Chromeで一時停止が発生しません。

1
Alex

小さなライブラリ を作成しました。これにより、画像なしでスロバを簡単に使用できます。

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

例 。

1
alex