Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Animierbare CSS Eigenschaften
CSS-Animationen undÜbergänge basieren auf dem Konzept deranimierbaren Eigenschaften, und alle CSS-Eigenschaften sind animierbar, es sei denn, es ist anders angegeben. DerAnimationstyp jeder Eigenschaft bestimmt, wie Wertekombiniert 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 derWeb-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 derregisterProperty() Methode registriert wurden, ist der Animationstyp nach berechnetem Wert, wobei der berechnete Wertetypbestimmt wird durch die Syntaxdefinition der Eigenschaft.
Für nicht registrierte benutzerdefinierte Eigenschaften ist der Animationstyp diskret.