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.
Antworten:
Ihr Problem hier ist, dass Sie eine geliefert haben,
-webkit-TRANSITION-timing-function
wenn Sie eine möchten-webkit-ANIMATION-timing-function
. Ihre Werte von 0 bis 360 funktionieren ordnungsgemäß.quelle
ease
Timing-Funktion verwendet).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:
Was dem Apfellade-Symbol möglicherweise ähnlicher ist, ist eine Animation, die die Deckkraft / Farbe der Graustreifen ändert, anstatt das Symbol zu drehen.
quelle
Sie könnten eine Animation wie diese verwenden:
quelle
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
quelle
GIF
als auchCSS
. Meine Sammlung . Wenn Sie mehr wissen, lassen Sie es mich bitte wissen.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.
quelle
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.
Beispiel .
quelle