Animierbare CSS Eigenschaften
CSS-Animationen und Übergänge basieren auf dem Konzept der animierbaren Eigenschaften, und alle CSS-Eigenschaften sind animierbar, es sei denn, es ist anders angegeben. Der Animationstyp jeder Eigenschaft bestimmt, wie Werte kombiniert werden - interpolieren, addieren oder akkumulieren - für diese Eigenschaft. Übergänge beinhalten nur Interpolation, während Animationen alle drei Kombinationsmethoden verwenden können.
Hinweis:
Der Animationstyp für jede CSS-Eigenschaft ist in ihrer "Formaldefinition"-Tabelle aufgeführt (z. B. color).
Hinweis:
Die Interpolationsmethode für jeden CSS-Datentyp wird in seinem "Interpolation"-Abschnitt beschrieben (z. B. <length>).
Animationstypen
Es gibt hauptsächlich vier Animationstypen, wie in der Web-Animationen Spezifikation definiert:
- Nicht animierbar
-
Die Eigenschaft ist nicht animierbar. Sie wird nicht verarbeitet, wenn sie in einem Animationsschlüsselbild aufgeführt ist und wird von Übergängen nicht beeinflusst.
Hinweis: Ein Animationseffekt, der nur auf Eigenschaften abzielt, die nicht animierbar sind, zeigt dennoch das übliche Verhalten eines Animationseffekts (z. B. das Auslösen des
animationstartEreignisses). - Diskret
-
Die Werte der Eigenschaft sind nicht additiv, und die Interpolation wechselt vom Startwert zum Endwert bei
50%. Genauer gesagt, wennpden Fortschrittswert bezeichnet:- Wenn
p < 0.5, dannV_result = V_start; - Wenn
p ≥ 0.5, dannV_result = V_end.
- Wenn
- Nach berechnetem Wert
-
Entsprechende einzelne Komponenten der berechneten Werte werden mit dem angegebenen Verfahren für diesen Wertetyp kombiniert. Wenn die Anzahl der Komponenten oder die Typen der entsprechenden Komponenten nicht übereinstimmen oder wenn ein Komponentenwert diskrete Animation verwendet und die beiden entsprechenden Werte nicht übereinstimmen, dann werden die Eigenschaftswerte als diskret kombiniert.
- Wiederholbare Liste
-
Wie nach berechnetem Wert, außer dass, wenn die beiden Listen unterschiedliche Anzahlen von Elementen haben, sie zuerst auf die kleinste gemeinsame Vielfache Anzahl von Elementen wiederholt werden. Jedes Element wird dann nach berechnetem Wert kombiniert. Wenn ein Wertepaar nicht kombiniert werden kann oder ein Komponentenwert diskrete Animation verwendet, dann werden die Eigenschaftswerte als diskret kombiniert.
Einige Eigenschaften haben spezifisches Interpolationsverhalten, das nicht von diesen vier Typen abgedeckt wird. In diesem Fall beziehen Sie sich auf den "Interpolation"-Abschnitt der Eigenschaft (z. B. visibility).
Animierung benutzerdefinierter Eigenschaften
Für benutzerdefinierte Eigenschaften, die mit der registerProperty() Methode registriert wurden, ist der Animationstyp nach berechnetem Wert, wobei der berechnete Wertetyp bestimmt wird durch die Syntaxdefinition der Eigenschaft.
Für nicht registrierte benutzerdefinierte Eigenschaften ist der Animationstyp diskret.