Animierbare CSS-Eigenschaften

CSS-Animationen und Übergänge basieren auf dem Konzept der animierbaren Eigenschaften, und alle CSS-Eigenschaften sind animierbar, sofern nicht anders angegeben. Der Animationstyp jeder Eigenschaft bestimmt, wie Werte für diese Eigenschaft kombiniert werden - interpoliert, addiert oder akkumuliert. Übergänge beinhalten nur Interpolation, während Animationen alle drei Kombinationsmethoden verwenden können.

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 Animations-Schlüsselbild aufgelistet ist, und wird von Übergängen nicht beeinflusst.

Hinweis: Ein Animationseffekt, der sich nur auf Eigenschaften konzentriert, die nicht animierbar sind, zeigt dennoch das übliche Verhalten eines Animationseffekts (z.B., Auslösen des animationstart Ereignisses).

Diskret

Die Werte der Eigenschaft sind nicht additiv, und die Interpolation wechselt vom Startwert zum Endwert bei 50%. Genauer gesagt, unter Verwendung des Fortschrittswerts p:

• Wenn p < 0.5, dann V_result = V_start;
• Wenn p ≥ 0.5, dann V_result = V_end.

Nach berechnetem Wert

Die entsprechenden individuellen Komponenten der berechneten Werte werden mit dem angegebenen Verfahren für diesen Werttyp kombiniert. Wenn die Anzahl der Komponenten oder die Typen der entsprechenden Komponenten nicht übereinstimmen oder wenn irgendein Komponentenwert eine diskrete Animation verwendet und die beiden entsprechenden Werte nicht übereinstimmen, werden die Eigenschaftswerte als diskret kombiniert.

Wiederholbare Liste

Genauso 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 irgendein Komponentenwert eine diskrete Animation verwendet, werden die Eigenschaftswerte als diskret kombiniert.

Einige Eigenschaften haben spezielles Interpolationsverhalten, das nicht von diesen vier Typen abgedeckt wird. In diesem Fall konsultieren Sie den Abschnitt "Interpolation" der Eigenschaft (z.B., visibility).

Animation von benutzerdefinierten Eigenschaften

Für benutzerdefinierte Eigenschaften, die über die Methode registerProperty() registriert wurden, ist der Animationstyp "nach berechnetem Wert", wobei der Typ des berechneten Wertes bestimmt wird durch die Syntaxdefinition der Eigenschaft.

Für nicht registrierte benutzerdefinierte Eigenschaften ist der Animationstyp diskret.

Siehe auch

• Verwendung von CSS-Animationen
• Verwendung von CSS-Übergängen