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

120

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.

Gcoop
quelle
14
Webkit-spezifischer Code macht es nicht weniger CSS3 .. wenn man bedenkt, dass keiner der anderen Anbieter zu diesem Zeitpunkt gleiche Funktionen bereitstellte :)
19.
4
Sollte die Animation nicht von 0 bis 359 laufen? Wenn es von 0 bis 360 lief, dann würde der Frame bei 0 zweimal gespielt werden, da Frame 0 und Frame 360 ​​gleich wären ...
Brad Parks
1
@BradParks Wenn Sie dagegen von 0 auf 359 wechseln, wird die Animation, die bei 359.5 stattfinden soll, vollständig übersprungen. In den meisten Fällen ist die Überlappung von 0 und 360 so schnell, dass sie nicht bemerkt wird.
Blazemonger
@Blazemonger nicht unbedingt. Sie können es selbst in einer jsfiddle ausprobieren und feststellen, dass es je nach Animationsdauer möglicherweise nicht so subtil ist.
Ilan Biala
1
Diese ganze Sache mit 359 Grad ist albern - Sie haben keine Kontrolle über den Schritt der Animation. Angenommen, eine 1-Sekunden-Animation mit 60 Bildern pro Sekunde entspricht 6 Grad pro Bild. Sie sollten also bei '354 Grad' anhalten. Aber wie gesagt, Sie haben hier keine Kontrolle über die Bildrate, also ist es ziemlich sinnlos. Ich würde mir vorstellen, dass eine intelligente Implementierung 0-360 erkennen und entsprechend anpassen könnte. Ich habe gerade die Zeit und den Winkel mit 100 multipliziert - dh. 0 Grad bis 36000 Grad, so dass der theoretische Fehler nur alle 100 Umdrehungen auftritt. aber ich habe festgestellt, dass Sie Animationsstörungen bekommen werden, egal was Sie sowieso tun
Simon_Weaver

Antworten:

71

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äß.

rrahlf
quelle
Ein typischer Fehler beim Kopieren und Einfügen. Vielen Dank! (Ich habe mein CSS tatsächlich von shareaholic erhalten und aufgrund der falsch benannten Eigenschaft wurde die Standard- easeTiming-Funktion verwendet).
Doekman
55

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.

Ilan Biala
quelle
3
Ihre JS-Geige enthält die prägnanteste Implementierung, die ich für eine einfache Bildrotation gesehen habe - perfekt (und danke für die Veröffentlichung).
Philip Murphy
danke lass es mich wissen, wenn du andere Hilfe brauchst. Übrigens habe ich die Webkit-Präfixe für die Animation verwendet, aber du solltest auch die Mozilla-Präfixe einschließen, da sie stattdessen die -moz-css-Regel verwenden.
Ilan Biala
Sie können auch die Zeit und den Winkel mit 100 multiplizieren - dh. 0 Grad bis 36000 Grad :-)
Simon_Weaver
@Simon_Weaver müsste immer noch 35999 Grad sein, um keine Doppelbilder zu sehen.
Ilan Biala
2
@IlanBiala, außer ich bezweifle sehr, dass Ihre Grafikkarte mit 720 fps läuft ;-) Es ist unmöglich, dass Sie wissen, wie hoch das Inkrement zwischen den Frames ist, ohne die Framerate zu kennen. Wenn überhaupt, können Sie auch 348 Grad einstellen, da bei einer halben Sekunde bei 60 fps jeder Frame um 12 Grad vorrücken würde. Ich würde lieber einfach 360 setzen und hoffen, dass jemand Smart den Browser so programmiert hat, dass er sich automatisch anpasst
Simon_Weaver
27

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)}
}
Kinglybird
quelle
2
Tolle und einfache Lösung!
TheLD
1

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.

Alex
quelle
Perfekt, ich bin mir ziemlich sicher, dass Ihre Annahme richtig ist, aber ich verwende ein PNG, da mein Ladesymbol keine Sonnenuhr ist, sondern ein Symbol im Nuklearstil ... Es muss jedoch nicht sein, damit ich es auf die von Ihnen verwendete Methode ändern kann vorschlagen - danke!
Gcoop
1

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 .

Alex
quelle