Animierbare CSS-Eigenschaften

CSS-Animationen und Übergänge basieren auf dem Konzept von animierbaren Eigenschaften, und alle CSS-Eigenschaften sind animierbar, es sei denn, es ist anders angegeben. Der Animationstyp jeder Eigenschaft bestimmt, wie Werte für diese Eigenschaft kombiniert werden - interpolieren, addieren oder akkumulieren. Übergänge beinhalten nur die Interpolation, während Animationen alle drei Kombinationsmethoden verwenden können.

Hinweis: Der Animationstyp für jede CSS-Eigenschaft ist in ihrer Tabelle „Formale Definition“ aufgeführt (z.B. color).

Hinweis: Die Interpolationsmethode für jeden CSS-Datentyp wird im Abschnitt „Interpolation“ beschrieben (z.B. <length>).

Animationstypen

Es gibt hauptsächlich vier Animationstypen, wie in der Spezifikation für Web Animationen definiert:

Nicht animierbar

Die Eigenschaft ist nicht animierbar. Sie wird nicht verarbeitet, wenn sie in einem Animations-Schlü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 für einen Animationseffekt (z.B. das Auslösen des animationstart-Ereignisses).

Diskret

Die Werte der Eigenschaft sind nicht additiv, und die Interpolation wechselt bei 50% vom Startwert zum Endwert. Genauer gesagt, indem p den Fortschrittswert darstellt:

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

Entsprechende einzelne Komponenten der berechneten Werte werden durch das für diesen Werttyp angegebene Verfahren 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 kombinieren sich die Eigenschaftswerte diskret.

Wiederholbare Liste

Gleich wie nach berechnetem Wert, außer dass, wenn die beiden Listen unterschiedliche Anzahlen von Elementen haben, sie zuerst auf das kleinste gemeinsame Vielfache der Anzahl der Elemente wiederholt werden. Jedes Element wird dann nach berechnetem Wert kombiniert. Wenn ein Wertepaar nicht kombiniert werden kann oder ein Komponentenwert diskrete Animation verwendet, dann kombinieren sich die Eigenschaftswerte diskret.

Einige Eigenschaften haben spezifische Interpolationsverhalten, die nicht von diesen vier Typen abgedeckt sind. In diesem Fall lesen Sie im Abschnitt „Interpolation“ der Eigenschaft nach (z.B. visibility).

Animieren benutzerdefinierter Eigenschaften

Für benutzerdefinierte Eigenschaften, die mit der Methode registerProperty() registriert wurden, erfolgt der Animationstyp nach berechnetem Wert, wobei der Typ des berechneten Werts nach der Syntaxdefinition der Eigenschaft bestimmt wird.

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

Siehe auch