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

bookAnpassen von Übergängen mit Timing-Funktionen

Die transition-timing-function legt die Geschwindigkeitskurve eines Übergangseffekts fest. Sie bestimmt, wie schnell eine Animation beginnt und endet sowie das Tempo ihres Ablaufs.

transition-timing-function: time_function;

Es gibt wichtige Schlüsselwörter, die die verschiedenen time_functions beschreiben:

  • ease – Standardwert. Ein Übergangseffekt mit langsamem Start, dann schnell, endet langsam;
  • linear – Konstante Geschwindigkeit während des gesamten Übergangs;
  • ease-in – Ein Übergangseffekt mit langsamem Start;
  • ease-out – Ein Übergangseffekt mit langsamem Ende;
  • ease-in-out – Ein Übergangseffekt mit langsamem Start und Ende sowie schnellem Mittelteil.

Im folgenden Beispiel wird der Unterschied zwischen ihnen deutlich. Der Übergang wird nur beim Hover über das container-Element ausgelöst.

index.html

index.html

index.css

index.css

copy

Kubische Bézier-Kurve

Wir können auch die Funktion cubic-bezier() verwenden, um eine benutzerdefinierte timing-function zu erstellen. Diese Funktion nimmt vier Werte entgegen, die die Kontrollpunkte einer kubischen Bézier-Kurve darstellen und die Form der Timing-Funktion bestimmen.

Hinweis

Keine Sorge. Es sind keine mathematischen Kenntnisse erforderlich, um die cubic-bezier-Funktion als CSS-Eigenschaftswert zu generieren. Wir können die https://cubic-bezier.com/ Quelle verwenden, um unsere eigenen Funktionen zu generieren.

Betrachten wir das folgende Beispiel, um zu sehen, wie einfach die Anwendung ist. Die cubic-bezier-Funktion wurde mithilfe des Verschiebens der Punkte auf dieser Quelle generiert.

Daher können wir die Funktion oben in unsere css-Datei kopieren.

index.html

index.html

index.css

index.css

copy
question mark

Was ist der Zweck der transition-timing-function?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 4

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

bookAnpassen von Übergängen mit Timing-Funktionen

Swipe um das Menü anzuzeigen

Die transition-timing-function legt die Geschwindigkeitskurve eines Übergangseffekts fest. Sie bestimmt, wie schnell eine Animation beginnt und endet sowie das Tempo ihres Ablaufs.

transition-timing-function: time_function;

Es gibt wichtige Schlüsselwörter, die die verschiedenen time_functions beschreiben:

  • ease – Standardwert. Ein Übergangseffekt mit langsamem Start, dann schnell, endet langsam;
  • linear – Konstante Geschwindigkeit während des gesamten Übergangs;
  • ease-in – Ein Übergangseffekt mit langsamem Start;
  • ease-out – Ein Übergangseffekt mit langsamem Ende;
  • ease-in-out – Ein Übergangseffekt mit langsamem Start und Ende sowie schnellem Mittelteil.

Im folgenden Beispiel wird der Unterschied zwischen ihnen deutlich. Der Übergang wird nur beim Hover über das container-Element ausgelöst.

index.html

index.html

index.css

index.css

copy

Kubische Bézier-Kurve

Wir können auch die Funktion cubic-bezier() verwenden, um eine benutzerdefinierte timing-function zu erstellen. Diese Funktion nimmt vier Werte entgegen, die die Kontrollpunkte einer kubischen Bézier-Kurve darstellen und die Form der Timing-Funktion bestimmen.

Hinweis

Keine Sorge. Es sind keine mathematischen Kenntnisse erforderlich, um die cubic-bezier-Funktion als CSS-Eigenschaftswert zu generieren. Wir können die https://cubic-bezier.com/ Quelle verwenden, um unsere eigenen Funktionen zu generieren.

Betrachten wir das folgende Beispiel, um zu sehen, wie einfach die Anwendung ist. Die cubic-bezier-Funktion wurde mithilfe des Verschiebens der Punkte auf dieser Quelle generiert.

Daher können wir die Funktion oben in unsere css-Datei kopieren.

index.html

index.html

index.css

index.css

copy
question mark

Was ist der Zweck der transition-timing-function?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 4
some-alt