CSS-Easing-Funktionen

Das Modul CSS-Easing-Funktionen definiert Easing-Funktionen, die eine Möglichkeit bieten, die Transformation von Werten zu steuern. Die definierten Funktionen umfassen lineare, kubische Bézier- und Schritt-Easing-Funktionen. Diese Easing-Funktionen können auf Animationen und Übergänge angewendet werden.

Die Geschwindigkeit, mit der sich ein Element bewegt, allmählich zu erhöhen, kann dem Element ein Gefühl von Gewicht verleihen, da es scheint, Schwung zu bekommen. Easing-Funktionen ermöglichen es Ihnen, die Änderungsrate zu kontrollieren. Kubische Bézier-Easing-Funktionen können verwendet werden, um intuitive Benutzeroberflächelemente oder überzeugende Cartoon-Requisiten zu erzeugen, die sich wie ihre physikalischen Gegenstücke verhalten.

Alternativ möchten Sie möglicherweise, dass sich eine Animation in bestimmten Schritten vorwärts bewegt, um eine roboterartige Bewegung zu erzeugen oder den Effekt eines segmentierten Rades zu erzielen, das sich so dreht, dass die Segmente immer in derselben Position erscheinen. Für diesen Zweck können Schritt-Easing-Funktionen verwendet werden.

Referenz

Funktionen

• cubic-bezier()
• linear()
• steps()

Datentypen

• <easing-function>
• <linear-easing-function>
• <cubic-bezier-easing-function>
• <step-easing-function>

Begriffe und Glossardefinitionen

• Bézier-Kurve
• Interpolation

Leitfäden

CSS-Wertfunktionen: Easing-Funktionen

Die CSS-Anweisungen, die eine spezielle Datenverarbeitung oder Berechnungen aufrufen, um einen CSS-Wert für eine CSS-Eigenschaft zurückzugeben.

Verwandte Konzepte

• CSS-Animationsmodul

  • animation-timing-function
  • animation Kurzform

• CSS-Übergangsmodul

  • transition-timing-function
  • transition Kurzform

Spezifikationen

Siehe auch

• CSS-Wertfunktionen
• will-change CSS-Eigenschaft