linear() CSS-Funktion

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 Animationstimeline darstellen:

<number>

Reprsentiert einen Punkt in der Zeit whrend der Dauer der Animation oder des bergangs. Es mssen mindestens zwei Werte angegeben werden. Der Wert 0 reprsentiert den Beginn des bergangs und 1 das Ende. Werte auerhalb des Bereichs von 0 bis 1 sind ebenfalls erlaubt.

<percentage> Optional

Gibt an, wann der Fortschritt <number> whrend der Animationstimeline erreicht wird. Er kann nach jedem <number>-Wert auer dem ersten und letzten angegeben werden und kann bis zu zwei Werte annehmen. Wenn zwei Prozentwerte angegeben werden, definieren sie die Lnge des Haltepunkts: Der erste Prozentsatz gibt den Startpunkt an und der zweite Prozentsatz den Endpunkt fr dieses Segment in der Animation oder im bergang. Wenn kein <percentage>-Wert angegeben wird, werden die Fortschrittswerte gleichmig entlang der Timeline verteilt.

Beschreibung

Die linear()-Funktion ermglicht die Annherung komplexer Animationen und bergnge, indem sie linear zwischen den angegebenen Punkten interpoliert. Eine typische Nutzung der linear()-Funktion ist es, viele Punkte bereitzustellen, um eine beliebige Kurve anzunhern.

Die linear()-Funktion erzeugt bergnge, bei denen der Fortschritt mit einer konstanten Geschwindigkeit zwischen den angegebenen Punkten erfolgt. Zum Beispiel hat linear(0, 0.25, 1) lineare Stops bei 0, 0.25 und 1. Die Animation beginnt bei Punkt 0, bewegt sich linear zu 0.25 und fhrt dann linear zu Punkt 1 fort. Da kein Prozentsatz angegeben ist, wird fr jedes Segment dieselbe Dauer (50%) verwendet, das heit von 0 zu 0.25 und von 0.25 zu 1.

[Diagramme des Eingabefortschritts zum Ausgabefortschritt, von denen linear(0, 0.25, 1) eine unterbrochene Linie zeigt, die den Ursprung, (0.5, 0.25) und (1, 1) verbindet; und linear(0, 0.25 75%, 1) eine unterbrochene Linie zeigt, die den Ursprung, (0.75, 0.25) und (1, 1) verbindet.]

Standardmig sind die Stops quidistant. Wenn es beispielsweise fnf Stops gibt, treten sie bei 0%, 25%, 50%, 75% und 100% der Dauer auf. Sie knnen optionale Prozentwerte verwenden, um eine feinere Kontrolle zu ermglichen, indem Sie definieren, wann jeder Fortschrittswert erfolgen soll, und so ein kontrollierteres Fortschreiten des bergangs ermglichen.

Betrachten Sie eine Animation mit einer Dauer von 100 Sekunden und einer nderung von 100 Pixeln. Sehen wir uns ein Szenario an, in dem das Easing der Animation als linear(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% der Gesamtnderung) voran. Die letzten 75 Pixel werden in den verbleibenden 25 Sekunden der Animation angewendet.

Bei derselben Animation wird die Easing-Funktion als linear(0, 0.5 25% 75%, 1) angegeben. Hier erreicht die Animation 50 Pixel (50% der Gesamtnderung) in 25 Sekunden (25% der Dauer) und bleibt dort fr 50 Sekunden (75% - 25% der Dauer). Dann werden die letzten 50 Pixel in den verbleibenden 25 Sekunden der Dauer angewendet. Beachten Sie, dass linear(0, 0.5 25% 75%, 1) gleichbedeutend mit linear(0, 0.5 25%, 0.5 75%, 1) ist.

Formale Syntax

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

Beispiele

Verwendung der linear() Funktion

Die folgenden linear()-Funktionen sind zur Verwendung in CSS gltig:

/* Three evenly distributed progress points */
linear(0, 0.25, 1)

/* Custom timing with percentage values */
linear(0, 0.5 25% 75%, 1)

Die folgenden linear()-Definitionen sind ungltig:

/* 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-Kompatibilitt

Siehe auch

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