Auswahl der Richtigen Übergangseigenschaften
Es kann jede CSS-Eigenschaft als Wert für die Eigenschaft transition-property angegeben werden. Das bedeutet, dass ein Übergangseffekt auf jede Eigenschaft angewendet werden kann.
transition-property: ... /* any property */
Im Folgenden werden einige typische Eigenschaften betrachtet, auf die Übergänge angewendet werden. Die Eigenschaften transition-duration, transition-timing-function und transition-delay bleiben dabei stets unverändert. Alle Übergänge reagieren auf das Überfahren mit dem Mauszeiger.
index.html
index.css
Mehrere Übergangseigenschaften
Wir können auch den Wert all für die Eigenschaft transition-property verwenden, was bedeutet, dass alle Eigenschaften überblendet werden.
transition-property: all;
Im folgenden Beispiel sollen die Änderungen der Eigenschaften background-color, color, font-weight und font-size überblendet werden. Sehen wir uns die Datei index.css an:
index.html
index.css
Außerdem, wenn wir einen Übergang auf mehrere Eigenschaften anwenden möchten, aber nicht auf alle, können wir diese als Wert für die Eigenschaft transition-property festlegen und sie mit einem Leerzeichen trennen. Zum Beispiel:
transition-property: color border height;
Das bedeutet, dass der Übergang auf die Eigenschaften color, border und height angewendet wird.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04Auswahl der Richtigen Übergangseigenschaften
Swipe um das Menü anzuzeigen
Es kann jede CSS-Eigenschaft als Wert für die Eigenschaft transition-property angegeben werden. Das bedeutet, dass ein Übergangseffekt auf jede Eigenschaft angewendet werden kann.
transition-property: ... /* any property */
Im Folgenden werden einige typische Eigenschaften betrachtet, auf die Übergänge angewendet werden. Die Eigenschaften transition-duration, transition-timing-function und transition-delay bleiben dabei stets unverändert. Alle Übergänge reagieren auf das Überfahren mit dem Mauszeiger.
index.html
index.css
Mehrere Übergangseigenschaften
Wir können auch den Wert all für die Eigenschaft transition-property verwenden, was bedeutet, dass alle Eigenschaften überblendet werden.
transition-property: all;
Im folgenden Beispiel sollen die Änderungen der Eigenschaften background-color, color, font-weight und font-size überblendet werden. Sehen wir uns die Datei index.css an:
index.html
index.css
Außerdem, wenn wir einen Übergang auf mehrere Eigenschaften anwenden möchten, aber nicht auf alle, können wir diese als Wert für die Eigenschaft transition-property festlegen und sie mit einem Leerzeichen trennen. Zum Beispiel:
transition-property: color border height;
Das bedeutet, dass der Übergang auf die Eigenschaften color, border und height angewendet wird.
Danke für Ihr Feedback!
