CSS3 Continuous Rotate Animation (genau wie eine Lade-Sonnenuhr)

Ich versuche, eine Aktivitätsanzeige im Apple-Stil (Symbol zum Laden der Sonnenuhr) mithilfe einer PNG- und CSS3-Animation zu replizieren. Ich habe das Bild rotierend und mache es kontinuierlich, aber es scheint eine Verzögerung zu geben, nachdem die Animation beendet ist, bevor es die nächste Rotation macht.

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

Ich habe versucht, die Animationsdauer zu ändern, aber es macht keinen Unterschied, wenn Sie sie sofort verlangsamen, sagen wir 5s, ist es nur offensichtlicher, dass es nach der ersten Drehung eine Pause gibt, bevor sie sich wieder dreht. Es ist diese Pause, die ich loswerden möchte.

Jede Hilfe wird sehr geschätzt, danke.

Ihr Problem hier ist, dass Sie eine geliefert haben, -webkit-TRANSITION-timing-functionwenn Sie eine möchten -webkit-ANIMATION-timing-function. Ihre Werte von 0 bis 360 funktionieren ordnungsgemäß.

Möglicherweise bemerken Sie auch eine kleine Verzögerung, da 0 Grad und 360 Grad derselbe Punkt sind, sodass sie von Punkt 1 in einem Kreis zurück zu Punkt 1 gehen. Es ist wirklich unbedeutend, aber um dies zu beheben, müssen Sie nur 360 Grad ändern 359deg

Meine jsfiddle illustriert Ihre Animation:

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

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

Was dem Apfellade-Symbol möglicherweise ähnlicher ist, ist eine Animation, die die Deckkraft / Farbe der Graustreifen ändert, anstatt das Symbol zu drehen.

Sie könnten eine Animation wie diese verwenden:

-webkit-animation: spin 1s infinite linear;

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

Wenn Sie nur nach einer Webkit-Version suchen, ist diese geschickt: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html von http://37signals.com/svn/posts/2577-loading- Spinner-Animation-mit-CSS-und-Webkit

Ihr Code scheint korrekt zu sein. Ich würde annehmen, dass dies etwas mit der Tatsache zu tun hat, dass Sie eine PNG-Datei verwenden und die Art und Weise, wie der Browser das Objekt beim Drehen neu zeichnet, ineffizient ist und den Hang verursacht (unter welchem ​​Browser testen Sie?).

Wenn möglich, ersetzen Sie die .png durch etwas Natives.

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

Chrome gibt mir mit dieser Methode keine Pausen.

Ich habe eine kleine Bibliothek erstellt , mit der Sie problemlos einen Throbber ohne Bilder verwenden können.

Es verwendet CSS3, greift jedoch auf JavaScript zurück, wenn der Browser dies nicht unterstützt.

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

Beispiel .