Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Kombinieren von Übergängen | Sanfte Übergänge in CSS Erstellen
Fortgeschrittene CSS-Techniken

bookKombinieren von Übergängen

Alle Übergangseigenschaften können in einer einzigen Zeile kombiniert werden.

transition: <property> <time> <time_function> <delay>;

Angenommen, es soll eine Übergangseigenschaft zu einem Element hinzugefügt werden. Erwartet wird:

  • die Änderung der Eigenschaft background-color;
  • die Zeitdauer beträgt 1.2s;
  • die Zeitfunktion ist ease-in-out;
  • die Verzögerung beträgt 250ms.

Ausführliche Schreibweise

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Kurzschreibweise

transition: background-color 1200ms ease-in-out 250ms;

Hinweis

Für den Browser besteht kein Unterschied in der Syntax. Wir können jede bevorzugte Option auswählen.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookKombinieren von Übergängen

Swipe um das Menü anzuzeigen

Alle Übergangseigenschaften können in einer einzigen Zeile kombiniert werden.

transition: <property> <time> <time_function> <delay>;

Angenommen, es soll eine Übergangseigenschaft zu einem Element hinzugefügt werden. Erwartet wird:

  • die Änderung der Eigenschaft background-color;
  • die Zeitdauer beträgt 1.2s;
  • die Zeitfunktion ist ease-in-out;
  • die Verzögerung beträgt 250ms.

Ausführliche Schreibweise

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Kurzschreibweise

transition: background-color 1200ms ease-in-out 250ms;

Hinweis

Für den Browser besteht kein Unterschied in der Syntax. Wir können jede bevorzugte Option auswählen.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 6
some-alt