Dielinear()CSSFunktion erzeugt eine Übergangskurve, die gleichmäßig zwischen Punkten verläuft. Als<easing-function> erstellt sie Übergänge, bei denen dieInterpolation mit konstanter Geschwindigkeit vom Anfang bis zum Ende erfolgt.

Syntax

linear(0, 1)linear(0, 0.25, 1)linear(0, 0.25 75%, 1)linear(0, 0.5 25% 75%, 1)

Parameter

Die Funktion akzeptiert zwei oder mehr der folgenden Werte, die Fortschrittspunkte in der Animationszeitachse darstellen:

<number>

Repräsentiert einen Zeitpunkt während der Dauer der Animation oder des Übergangs. Es müssen mindestens zwei Werte angegeben werden. Der Wert0 steht für den Beginn des Übergangs und1 für das Ende. Werte außerhalb des Bereichs von0 bis1 sind ebenfalls erlaubt.

<percentage>Optional

Gibt an, wann der Fortschritt<number> während der Animationszeitleiste erreicht wird. Er kann nach jedem<number>-Wert außer dem ersten und letzten angegeben werden und kann bis zu zwei Werte annehmen. Wenn zwei Prozentwerte angegeben sind, definieren sie die Länge des Stops: Der erste Prozentsatz gibt den Startpunkt und der zweite Prozentsatz das Ende des Segments in der Animation oder dem Übergang an. Wenn kein<percentage>-Wert angegeben wird, werden die Fortschrittswerte gleichmäßig entlang der Zeitleiste verteilt.

Beschreibung

Die Funktionlinear() ermöglicht die Annäherung komplexer Animationen und Übergänge durch lineare Interpolation zwischen den angegebenen Punkten. Eine typische Verwendung der Funktionlinear() ist es, viele Punkte bereitzustellen, um eine beliebige Kurve zu approximieren.

Die Funktionlinear() erstellt Übergänge, bei denen der Fortschritt mit konstanter Geschwindigkeit zwischen den angegebenen Punkten erfolgt. Zum Beispiel hatlinear(0, 0.25, 1) lineare Stops bei0,0.25 und1. Die Animation beginnt bei Punkt0, verläuft linear zu0.25 und setzt sich dann linear bis Punkt1 fort. Da kein Prozentwert angegeben ist, wird die gleiche Dauer (50%) für jedes Segment verwendet, d.h. von0 bis0.25 und von0.25 bis1.

Standardmäßig sind die Stops äquidistant. Wenn es beispielsweise fünf Stops gibt, treten sie bei 0%, 25%, 50%, 75% und 100% der Dauer auf. Sie können optionale Prozentwerte verwenden, um eine genauere Kontrolle zu bieten, indem Sie definieren, wann jeder Fortschrittswert auftreten soll, und eine kontrolliertere Progression des Übergangs ermöglichen.

Betrachten Sie eine Animation mit einer Dauer von 100 Sekunden und einer Veränderung von 100 Pixeln. Schauen wir uns ein Szenario an, in dem das Easing der Animation alslinear(0, 0.25 75%, 1) angegeben ist. In diesem Fall schreitet die Animation in den ersten 75 Sekunden (75% der Dauer) zu 25 Pixeln (25% ihrer gesamten Veränderung) voran. Die letzten 75 Pixel werden in den verbleibenden 25 Sekunden der Animation angewendet.

Für die gleiche Animation nehmen wir an, dass die Easing-Funktion alslinear(0, 0.5 25% 75%, 1) angegeben ist. Hier erreicht die Animation in 25 Sekunden (25% der Dauer) 50 Pixel (50% ihrer gesamten Veränderung) und bleibt dort für 50 Sekunden (75% - 25% der Dauer). Dann werden die letzten 50 Pixel in den verbleibenden 25 Sekunden der Dauer angewendet. Beachten Sie, dasslinear(0, 0.5 25% 75%, 1) äquivalent zulinear(0, 0.5 25%, 0.5 75%, 1) ist.

Formale Syntax

<linear()> =
linear([<number>&&<percentage>{0,2}]#)

Beispiele

Verwendung der linear() Funktion

Die folgendenlinear()-Funktionen sind gültig für die Verwendung in CSS:

/* Three evenly distributed progress points */linear(0, 0.25, 1)/* Custom timing with percentage values */linear(0, 0.5 25% 75%, 1)

Die folgendenlinear()-Definitionen sind ungültig:

/* At least two parameters are required */linear(0.5)/* Percentages must be in ascending order */linear(0, 0.25 80%, 0.5 60%, 1)/* Values must be numbers */linear(start, middle, end)

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere Easing-Funktionen:cubic-bezier() undsteps()
• CSS Easing-Funktionen Modul
• linear() Easing-Generator von Jake Archibald