linear() CSS-Funktion
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
Die linear() CSS Funktion erzeugt eine Übergangskurve, die gleichmäßig zwischen Punkten verläuft.
Als <easing-function> erzeugt sie Übergänge, bei denen die Interpolation 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 Animationstimeline darstellen:
<number>-
Repräsentiert einen Punkt in der Zeit während der Dauer der Animation oder des Übergangs. Es müssen mindestens zwei Werte angegeben werden. Der Wert
0repräsentiert den Beginn des Übergangs und1das Ende. Werte außerhalb des Bereichs von0bis1sind ebenfalls erlaubt. <percentage>Optional-
Gibt an, wann der Fortschritt
<number>während der Animationstimeline 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 werden, definieren sie die Länge des Haltepunkts: Der erste Prozentsatz gibt den Startpunkt an und der zweite Prozentsatz den Endpunkt für dieses Segment in der Animation oder im Übergang. Wenn kein<percentage>-Wert angegeben wird, werden die Fortschrittswerte gleichmäßig entlang der Timeline verteilt.
Beschreibung
Die linear()-Funktion ermöglicht die Annäherung komplexer Animationen und Übergänge, indem sie linear zwischen den angegebenen Punkten interpoliert.
Eine typische Nutzung der linear()-Funktion ist es, viele Punkte bereitzustellen, um eine beliebige Kurve anzunähern.
Die linear()-Funktion erzeugt Übergänge, 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 fährt dann linear zu Punkt 1 fort.
Da kein Prozentsatz angegeben ist, wird für jedes Segment dieselbe Dauer (