Laut Animation Spec :
Wenn kein Keyframe "0%" oder "von" angegeben ist, dann der Benutzeragent Konstruiert einen Keyframe mit 0% unter Verwendung der berechneten Werte der Eigenschaften animiert werden. Wenn ein Keyframe "100%" oder "bis" nicht angegeben ist, dann Der Benutzeragent erstellt einen '100%' Keyframe mit den berechneten Werten der Eigenschaften, die animiert werden.
Dies kann zu zwei unterschiedlichen Interpretationen führen:
A) Deklarieren Sie die Eigenschaft in der Klasse und nicht im Schlüsselbild 0% oder from .
B) Deklarieren Sie die Eigenschaft in den Klassen und im Schlüsselbild 0% oder from .
Während beide das gleiche Endergebnis haben, folge dem Wiederhole dich nicht ( DRY) Prinzip, A) könnte erheblich den Code für alle Animationen reduzieren, die mehr als eine Eigenschaft verwenden.
Ist es sicher, eine Eigenschaft aus dem Schlüsselwort 0% einer CSS-Animation zu entfernen, wenn sie bereits in der Klasse deklariert ist, auf die die Animation angewendet wird?
Macht das:
%Vor%in allen Browsern als sicher angesehen? Oder ist zu erwarten, dass Benutzeragenten unterschiedliche Ergebnisse oder Leistungen liefern?
Rendern des gleichen Ergebnisses:
Windows 10/64-Bit
Der berechnete Wert einer Eigenschaft kann davon abhängen, welche CSS-Regeln auf ein bestimmtes Element angewendet werden, die Spezifität dieser Regeln, ob das Element eine Inline-Stildeklaration für diese Eigenschaft hat oder ob ein Skript den Wert davon ändert Eigenschaft zur Laufzeit usw.
Wenn Sie möchten, dass eine Animation mit einem vorhersagbaren und festen Wert beginnt, müssen Sie diesen Wert im 0% -Keyframe angeben, damit er nicht mit dem animierten Wert des berechneten Werts beginnt Die Animation startet stattdessen.
Sie können das Schlüsselwort 0% weglassen, wenn Sie garantieren können, dass der berechnete Wert für das Element zum Zeitpunkt des Starts der Animation immer ein konstanter Wert ist. Sie müssen das Schlüsselwort 0% weglassen, wenn Sie möchten, dass die Animation immer mit dem beginnt, was der berechnete Wert gerade ist, wenn er sich ändern kann.
Ähnliche Regeln gelten für den 100% Keyframe: Wenn die Animation unabhängig vom berechneten Wert mit einem festen Wert enden muss, müssen Sie den 100% Keyframe angeben. Wenn es andernfalls mit dem gleichen Wert wie der berechnete Wert enden muss, müssen Sie es auslassen.
Es kann auf beide Arten funktionieren, wie die Spezifikation darauf hinweist.
In Bezug auf die Sicherheit sollte dies in den folgenden Browsern in Ordnung sein:
%Vor% Wenn ich 0% halte, könnte das Ihren Code besser lesbar machen, besonders wenn Sie eine komplexe Animation haben. Wenn Sie jedoch Wiederholungen vermeiden möchten, können Sie einen CSS-Preprozessor verwenden, zB LESS mit Animations-Keyframes Mixen oder andere Techniken .
Tags und Links css css3 css-animations