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 - interpoliert, addiert oder akkumuliert - 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 Tabelle "Formale Definition" aufgeführt (z.B. color).

Hinweis: Die Interpolationsmethode für jeden CSS-Datentyp ist in ihrem 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 ist, und ist von Übergängen unberührt.

Hinweis: Ein Animationseffekt, der nur nicht animierbare Eigenschaften anspricht, 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 bei 50% vom Startwert zum Endwert. Genauer gesagt, unter Bezeichnung 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 einzelne 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 ein Komponentwert diskrete Animation verwendet und die beiden entsprechenden Werte nicht übereinstimmen, dann werden die Eigenschaftswerte als diskret kombiniert.

Wiederholbare Liste

Das Gleiche wie nach berechnetem Wert, außer dass, wenn die beiden 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 Wertepaar nicht kombiniert werden kann oder ein Komponentwert diskrete Animation verwendet, dann werden die Eigenschaftswerte als diskret kombiniert.

Einige Eigenschaften haben ein spezifisches Interpolationsverhalten, das nicht durch diese vier Typen abgedeckt wird. In diesem Fall beziehen Sie sich bitte auf den Abschnitt "Interpolation" der jeweiligen Eigenschaft (z.B. visibility).

Animierung benutzerdefinierter Eigenschaften

Bei benutzerdefinierten Eigenschaften, die mit der Methode registerProperty() registriert wurden, ist der Animationstyp der berechnete Wert, wobei der berechnete Werttyp bestimmt wird durch die Syntaxdefinition der Eigenschaft.

Bei nicht registrierten benutzerdefinierten Eigenschaften ist der Animationstyp diskret.

Siehe auch