Animierbare CSS-Eigenschaften

CSS-Animationen und Transitionen 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 - interpolieren, hinzufügen oder akkumulieren. Transitionen beinhalten nur Interpolation, während Animationen alle drei Kombinationstechniken 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 in seinem Abschnitt "Interpolation" beschrieben (z. B., <length>).

Animationstypen

Es gibt hauptsächlich vier Animationstypen, wie in der Web Animations Spezifikation definiert:

Nicht animierbar

Die Eigenschaft ist nicht animierbar. Sie wird nicht verarbeitet, wenn sie in einem Animations-Schlüsselbild aufgeführt wird und ist von Transitionen nicht betroffen.

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 animationstart-Ereignisses).

Diskret

Die Werte der Eigenschaft sind nicht additiv, und die Interpolation wechselt vom Startwert zum Endwert bei 50%. Konkret, unter Verwendung von p als Fortschrittswert:

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

Entsprechende individuelle Komponenten der berechneten Werte werden unter Verwendung des angegebenen Verfahrens 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 diskret kombiniert.

Wiederholbare Liste

Gleich wie nach berechnetem Wert, außer dass, wenn die zwei Listen eine unterschiedliche Anzahl 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 Paar von Werten nicht kombiniert werden kann oder ein Komponentenwert diskrete Animation verwendet, dann werden die Eigenschaftswerte diskret kombiniert.

Einige Eigenschaften weisen ein spezifisches Interpolationsverhalten auf, das nicht durch diese vier Typen abgedeckt wird. In diesem Fall ist der Abschnitt "Interpolation" der Eigenschaft zu konsultieren (z. B., visibility).

Animierung benutzerdefinierter Eigenschaften

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

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

Siehe auch