Beim Arbeiten mit Animationen stieß ich auf ein undokumentiertes und unerwartetes Verhalten:
Beim Verketten von Animationen mit transform (jede transform-Eigenschaft und nur die transform-Eigenschaft) wird die erste Animation das erwartete Verhalten haben, vom Zustand A in den Zustand B überzugehen, während die zweite nur ohne Übergang von B nach C geht .
Ich weiß, dass in diesem speziellen Fall Dinge in einem einzigen Schritt erledigt werden können, aber das ist nicht die Lösung, nach der ich suche
Wie kann ich das nur mit CSS lösen?
UPDATE: Alles scheint in Firefox gut zu funktionieren, könnte es ein Chrom Bug sein?
UPDATE 2: Die Präfix-freie Animation wurde wie gewünscht hinzugefügt; Ändert sich nicht viel.
Dies ist ein weiterer Chrome-Rendering-Fehler.
Seltsamerweise scheint es ein Workaround zu sein, eine andere Eigenschaft hinzuzufügen, die keine Rolle spielt, um zu erkennen, dass eine Animation zu passieren scheint. In diesem Fall habe ich eine Zeile hinzugefügt, die standardmäßig den Hintergrund für% in to festlegt. Dies muss nur für die Keyframe-Animation -webkit- durchgeführt werden.
Die eigentliche Korrektur in Ihrem Projekt kann oder muss möglicherweise nicht die Eigenschaft zu etwas anderem ändern / hinzufügen mehr Orte. Ich kann es nicht wissen, ohne mich selbst zu testen.
Randnotizen:
-moz- für animation oder transform nicht verwenden (dort ) ist nicht -moz-transform ) Tags und Links css transform css-animations css-transitions