Ich habe eine CSS-Animation, die ein div unendlich dreht, wenn ich darüber schwebe. Das CSS sieht ungefähr so aus:
%Vor% Das Problem, das ich zu lösen versuche, ist, dass wenn ich schwebe, es plötzlich in seinen ursprünglichen Zustand zurückspringt. Das kann etwas nervend sein, wenn es in der Mitte der Animation ist. Gibt es einen Weg zu langsam Übergang in den ursprünglichen Zustand? Normalerweise können Sie das mit Übergängen machen, aber es scheint nicht in Verbindung mit Animationen zu funktionieren. Zum Beispiel habe ich versucht, -webkit-transition: all 2s; zum #square Selektor im obigen Beispiel hinzuzufügen, aber es hat nichts gemacht.
Beispiel: Ссылка
Ich habe ein paar Stunden mit diesem hier verbracht und denke, dass ich es endlich verstanden habe.
Hier ist ein Link zum JSFiddle
Im Wesentlichen wird #square das CSS-Attribut animation-name:rotate; hinzugefügt, um die unendliche Drehung zu initiieren. Dann fügt eine andere Funktion, die auf mouseout ausgelöst wird, animationiteration einen Ereignis-Listener hinzu, so dass die Animation bei der Iteration die Rotation beenden kann. Um die Rotation zu beenden, erhält #square das CSS-Attribut animation-name:none; . Schließlich wird #square durch einen eigenen Klon ersetzt, damit das Verhalten wiederholt werden kann, nachdem es einen Zyklus von hover und mouseout durchlaufen hat.
Zusätzlich
Diese Fiddle ist zwar leicht temperamentvoll, kann aber eine Teillösung für einen schönen Ease-Out-Effekt sein. Ich habe gerade das CSS mit einem: hover-Selektor modifiziert, um die linearen und easy-out-Attribute umzuschalten.