Dielinear()-CSS-Funktion erstellt eine Übergangskurve, die gleichmäßig zwischen Punkten verläuft. Als<easing-function> erzeugt sie Übergänge, bei denen dieInterpolation konstant 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. Mindestens zwei Werte müssen angegeben werden. Der Wert0 repräsentiert den Beginn des Übergangs, und1 das Ende. Werte außerhalb des Bereichs von0 bis1 sind ebenfalls erlaubt.

<percentage>Optional

Gibt an, wann der Fortschritt<number> während der Animationszeitachse erreicht wird. Es 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 Haltepunkts: Der erste Prozentwert gibt den Startpunkt an, und der zweite Prozentwert das Ende für diesen Abschnitt der Animation oder des Übergangs. Wenn kein<percentage>-Wert angegeben ist, werden die Fortschrittswerte gleichmäßig entlang der Zeitachse verteilt.

Beschreibung

Dielinear()-Funktion ermöglicht die Annäherung komplexer Animationen und Übergänge durch lineare Interpolation zwischen den angegebenen Punkten. Eine typische Verwendung derlinear()-Funktion besteht darin, viele Punkte bereitzustellen, um eine beliebige Kurve zu approximieren.

Dielinear()-Funktion erstellt Übergänge, bei denen der Fortschritt mit konstanter Geschwindigkeit zwischen den angegebenen Punkten erfolgt. Zum Beispiel hatlinear(0, 0.25, 1) lineare Haltepunkte bei0,0.25 und1. Die Animation beginnt an Punkt0, bewegt sich linear zu0.25 und fährt dann linear bis Punkt1 fort. Da kein Prozentsatz angegeben ist, wird für jedes Segment dieselbe Dauer (50%) verwendet, also von0 bis0.25 und von0.25 bis1.

Standardmäßig sind die Haltepunkte gleichmäßig verteilt. Zum Beispiel, wenn es fünf Haltepunkte gibt, treten sie bei 0%, 25%, 50%, 75% und 100% der Dauer auf. Sie können optionale Prozentwerte verwenden, um eine feinere Kontrolle zu ermöglichen, indem Sie definieren, wann jeder Fortschrittswert auftreten soll und so eine kontrolliertere Progression des Übergangs ermöglichen.

Betrachten Sie eine Animation mit einer Dauer von 100 Sekunden und einer Änderung von 100 Pixeln. Sehen wir uns ein Szenario an, bei dem die Abmilderung 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 Änderung) fort. Die letzten 75 Pixel werden in den verbleibenden 25 Sekunden der Animation angewendet.

Für dieselbe Animation nehmen wir an, dass die Abmilderungsfunktion alslinear(0, 0.5 25% 75%, 1) angegeben ist. Hier erreicht die Animation 50 Pixel (50% ihrer gesamten Änderung) in 25 Sekunden (25% der Dauer) und verbleibt 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) gleichwertig 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 zur Verwendung in CSS gültig:

/* 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 Abmilderungsfunktionen:cubic-bezier() undsteps()
• CSS-Abmilderungsfunktionen Modul
• linear() Abmilderungs-Generator von Jake Archibald