Anpassen 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.css
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.css
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
Can you explain how to use the cubic-bezier function in a CSS transition?
What are some practical examples of using different timing functions?
How do I choose the best timing function for my animation?
Awesome!
Completion rate improved to 2.08Anpassen 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.css
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.css
Danke für Ihr Feedback!
