<easing-function>

linear

Gibt eine konstante Interpolationsrate an, ohne Änderung der Fortschrittsrate über die gesamte Dauer (d. h. keine Beschleunigung oder Verzögerung). Dieser Schlüsselwortwert entspricht sowohl den Funktionen cubic-bezier(0, 0, 1, 1) als auch linear(0, 1).

<linear-easing-function>

Gibt eine linear() Funktion mit einem oder mehreren durch Kommas getrennten linear stops an, die jeweils bis zu zwei optionale stop lengths enthalten können, um den Fortschritt einer Animation oder eines Übergangs zu steuern.

Die linear() Funktion spezifiziert eine <linear-stop-list>, eine durch Kommas getrennte Liste von Punkten entlang des Animations- oder Übergangsfortschritts. Jeder Punkt oder <linear-stop> in der Liste wird als ein <number> zwischen 0 und 1 angegeben. Standardmäßig sind die Stopps in der <linear-stop-list> gleichmäßig verteilt. Um den Fortschritt der Animation oder des Übergangs besser zu kontrollieren, kann jeder Punkt bis zu zwei optionale <percentage> <linear-stop-length> Werte enthalten.

• <number>: Repräsentiert einen Zeitpunkt während der Dauer der Animation oder des Übergangs. Der Wert 0 repräsentiert den Beginn der Iteration und 1 das Ende. Werte außerhalb des Bereichs von 0 bis 1 sind ebenfalls erlaubt.

• <percentage>: Gibt die Position eines linearen Stopps entlang der Dauer an. Es können bis zu zwei Werte angegeben werden. Wenn ein Wert angegeben wird, definiert er den Beginn des zugehörigen linearen Stopps. Wenn zwei Prozentwerte angegeben werden, definieren diese die Länge des Stopps: Der erste Prozentwert gibt den Startpunkt an, der zweite Prozentwert den Endpunkt für dieses Segment der Animation oder des Übergangs. Wenn kein <percentage>-Wert angegeben wird, was der Standard ist, sind die Stopps gleichmäßig entlang der Zeitachse verteilt.

<cubic-bezier-easing-function>

Gibt eine Bézier-Kurve an, um den Fortschritt einer Animation oder eines Übergangs zu gestalten. In CSS werden Bézier-Kurven durch vier Kontrollpunkte definiert, die die Kurve mathematisch beschreiben: ein Startpunkt, ein Endpunkt und zwei Kontrollpunkte. Die kubische Bézier-Easing-Funktion kann auf eine dieser beiden Arten definiert werden: durch das Erstellen einer benutzerdefinierten Kurve mit einem vierparametrigen cubic-bezier() Funktionsaufruf oder durch die Verwendung eines der vordefinierten Schlüsselwortwerte, die den häufig verwendeten Bézier-Kurven parametrisieren. Die vordefinierten Schlüsselwortwerte umfassen:

ease: Dieses Schlüsselwort repräsentiert die Easing-Funktion cubic-bezier(0.25, 0.1, 0.25, 1). Es zeigt an, dass die Interpolation langsam beginnt, dann schnell beschleunigt und am Ende allmählich langsamer wird. Es ähnelt dem ease-in-out Schlüsselwort, beschleunigt jedoch zu Beginn stärker.

ease-in: Dieses Schlüsselwort repräsentiert die Easing-Funktion cubic-bezier(0.42, 0, 1, 1). Es zeigt an, dass die Interpolation langsam beginnt und dann bis zum Ende allmählich schneller wird, wo sie abrupt stoppt.

ease-out: Dieses Schlüsselwort repräsentiert die Easing-Funktion cubic-bezier(0, 0, 0.58, 1). Es zeigt an, dass die Interpolation abrupt beginnt und dann allmählich langsamer wird, bis zum Ende.

ease-in-out: Dieses Schlüsselwort repräsentiert die Easing-Funktion cubic-bezier(0.42, 0, 0.58, 1). Es zeigt an, dass die Interpolation langsam beginnt, schneller wird und dann am Ende allmählich langsamer wird. Zu Beginn verhält es sich wie das ease-in Schlüsselwort; am Ende ist es wie das ease-out Schlüsselwort.

cubic-bezier(): Diese Funktion akzeptiert vier <number> Werte, um eine Kurve zu formen.

• <number>: Gibt den Standort der P1 und P2 Punkte auf der Kurve an. <x1> und <y1> sind die Koordinaten für Punkt P1, und <x2> und <y2> sind die Koordinaten für Punkt P2. <x1> und <x2> Werte müssen zwischen 0 und 1 liegen, ansonsten funktioniert die Funktion nicht wie erwartet.

<step-easing-function>

Gibt eine steps() Funktion an, die die Animation in eine festgelegte Anzahl von gleich langen Intervallen oder "Steps" unterteilt, sodass die Animation von einem Step zum nächsten springt, anstatt einen sanften Übergang zu machen. Dieser Parameter akzeptiert eines der folgenden beiden Schlüsselwortwerte, die mit vordefinierten steps() Funktionen oder einer benutzerdefinierten steps() Funktion korrespondieren:

step-start: Dieses Schlüsselwort repräsentiert die Easing-Funktion steps(1, jump-start) oder steps(1, start). Es zeigt an, dass die Interpolation sofort in ihren Endzustand springt, wo sie bis zum Ende verbleibt.

step-end: Dieses Schlüsselwort repräsentiert die Easing-Funktion steps(1, jump-end) oder steps(1, end). Es zeigt an, dass die Interpolation in ihrem Anfangszustand bleibt, bis sie am Ende direkt in ihren Endzustand springt.

steps(): Diese Funktion akzeptiert einen positiven <integer> und eine optionale <step-position>.

• <integer>: Repräsentiert die Anzahl der gleichmäßig verteilten Intervalle oder 'Steps'. Es muss eine positive ganze Zahl größer als 0 sein, es sei denn, der zweite Parameter ist jump-none, in diesem Fall muss es eine positive ganze Zahl größer als 1 sein.

• <step-position>: Gibt das Timing des Sprungs an, der entweder am Anfang, am Ende, sowohl am Anfang als auch am Ende oder an keiner Stelle erfolgen soll. Die möglichen Schlüsselwortwerte umfassen:

  • jump-start bedeutet, dass der erste Sprung direkt am Anfang erfolgt, im Wesentlichen an der 0-Marke. Es wird keine Zeit bei der 0%-Marke verbracht.
  • jump-end bedeutet, dass der letzte Sprung direkt am Ende erfolgt, im Wesentlichen an der 1-Marke. Es wird keine Zeit bei der 100%-Marke verbracht. Dies ist der Standardwert, wenn keine <step-position> angegeben wird.
  • jump-none bedeutet, dass kein Sprung weder am Anfang noch am Ende erfolgt, wodurch effektiv ein Step während der Dauer entfernt wird. Stattdessen bleibt der Fortschritt sowohl bei der 0%-Marke als auch bei der 100%-Marke stabil. Die Dauer dieser Haltepunkte wird bestimmt, indem die Gesamtdauer durch die Anzahl der Steps (1/n) geteilt wird.
  • jump-both bedeutet, dass Sprünge sowohl am Anfang als auch am Ende erfolgen, im Wesentlichen sowohl bei 0 als auch 1. Effektiv wird an beiden Enden ein Step hinzugefügt. Es wird keine Zeit bei den 0%- und 100%-Marken verbracht.
  • start ist gleichbedeutend mit jump-start.
  • end ist gleichbedeutend mit jump-end.

Es gibt drei Typen von Easing-Funktionen:

• Linear
• Kubische Bézier-Kurve
• Steps

Die linear() Funktion erstellt eine stückweise lineare Easing, die die Annäherung komplexer Animationen und Übergänge ermöglicht, indem sie linear zwischen den angegebenen Punkten interpoliert. Die Interpolation erfolgt mit einer konstanten Rate von Anfang bis Ende. Ein typischer Anwendungsfall der linear() Funktion ist, viele Punkte bereitzustellen, um jede beliebige Kurve zu approximieren.

Zum Beispiel hat die Funktion linear(0, 0.25, 1) lineare Stopps von 0, 0.25 und 1 als Argumente. Die Animation oder der Übergang beginnt bei Punkt 0, bewegt sich linear zu 0.25 und setzt sich dann linear zu Punkt 1 fort. Da kein <linear-stop-length> Prozentwert angegeben ist, wird die gleiche Dauer (50%) verwendet, um von 0 auf 0.25 und von 0.25 auf 1 zu gelangen.

Standardmäßig sind die Stopps gleich weit voneinander entfernt. Wenn es also 5 Stopps gibt, befinden sie sich bei 0%, 25%, 50%, 75% und 100% der Dauer. Sie können optional <linear-stop-length> Prozentangaben verwenden, um die Kontrolle zu verfeinern, indem Sie den Beginn und/oder die Länge jedes Segments definieren, wodurch ein kontrollierterer Übergang erreicht wird.

Betrachten Sie eine Animation mit einer Dauer von 100 Sekunden und einer Änderung von 100 Pixeln. Schauen wir uns ein Beispiel an, in dem die Easing der Animation angegeben ist: linear(0, 0.25 75%, 1). In diesem Fall schreitet die Animation in den ersten 75 Sekunden (75% der Dauer) auf 25 Pixel (25% der gesamten Änderung) voran. Die letzten 75 Pixel werden in den verbleibenden 25 Sekunden der Animation angewendet. Für die gleiche Animation, angenommen, die Easing-Funktion wird stattdessen als linear(0, 0.5 25% 75%, 1) angegeben. Hier erreicht die Animation 50 Pixel (50% der gesamten Änderung) in 25 Sekunden (25% der Dauer), 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, dass linear(0, 0.5 25% 75%, 1) gleichbedeutend mit linear(0, 0.5 25%, 0.5 75%, 1) ist.

Die cubic-bezier() Funktionsnotation definiert eine kubische Bézier-Kurve. Die Easing-Funktionen im kubischen Bézier-Subset von Easing-Funktionen werden oft als "weiche" Easing-Funktionen bezeichnet, weil sie verwendet werden können, um den Start und das Ende der Interpolation zu glätten. Sie korrelieren einen Eingangsfortschritt mit einem Ausgangsfortschritt, beide ausgedrückt als <number>. Für diese Werte repräsentiert 0.0 den Anfangszustand und 1.0 den Endzustand.

Eine kubische Bézier-Kurve wird durch vier Punkte definiert: P0, P1, P2 und P3. Die Punkte P0 und P3 repräsentieren den Anfang und das Ende der Kurve. In CSS sind diese Punkte als die Koordinaten des Fortschritts festgelegt (die Abszisse ist der Eingangsfortschritt, die Ordinate der Ausgangsfortschritt). P0 ist (0, 0) und repräsentiert den Anfangsfortschritt und den Anfangszustand. P3 ist (1, 1) und repräsentiert den Endfortschritt und den Endzustand.

Nicht alle kubischen Bézier-Kurven sind als Easing-Funktionen geeignet, weil nicht alle mathematische Funktionen sind; d. h. Kurven, die für eine gegebene Abszisse null oder einen Wert haben. Mit P0 und P3, die durch CSS festgelegt sind, ist eine kubische Bézier-Kurve eine Funktion und daher gültig, wenn und nur wenn die Abszissen von P1 und P2 beide im [0, 1] Bereich liegen.

Kubische Bézier-Kurven mit der Ordinate von P1 oder P2 außerhalb des [0, 1] Bereichs können dazu führen, dass der Wert weiter als der Endzustand geht und dann zurückkehrt. Bei Animationen erzeugt dies für einige Eigenschaften, wie left oder right, einen "spring-effekt".

Jedoch werden bestimmte Eigenschaften den Ausgang einschränken, wenn er außerhalb eines zulässigen Bereichs liegt. Zum Beispiel wird eine Farbkomponente größer als 255 oder kleiner als 0 in rgb() auf den nächstgelegenen erlaubten Wert (255 und 0) beschnitten. Einige cubic-bezier() Werte zeigen diese Eigenschaft.

Wenn Sie eine ungültige kubische Bézier-Kurve angeben, ignoriert CSS die gesamte Eigenschaft.

Die Schlüsselwörter ease, ease-in, ease-out und ease-in-out entsprechen einem bestimmten cubic-bezier() Wert.

Die steps() Funktionsnotation definiert eine Stufenfunktion, die die Domäne der Ausgangswerte in gleich abständige Steps unterteilt. Diese Unterklasse von Stufenfunktionen wird manchmal auch Treppenfunktionen genannt.

Dies sind einige Beispiele zur Veranschaulichung der steps() Funktion:

steps(2, jump-start) /* Or steps(2, start) */
steps(4, jump-end) /* Or steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)

Die Schlüsselwörter step-start und step-end sind gleichbedeutend mit einem bestimmten steps() Wert.

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

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

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

Dieses Beispiel bietet einen einfachen Vergleich zwischen den verschiedenen Easing-Funktionen mithilfe einer Animation. Aus dem Dropdown-Menü können Sie eine Easing-Funktion auswählen – es gibt ein paar Schlüsselwörter und einige cubic-bezier() sowie steps() Optionen. Nach der Auswahl einer Option können Sie die Animation mit dem bereitgestellten Button starten oder stoppen.

HTML

<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

CSS

body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

JavaScript

const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Start animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Stop animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Start animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

Ergebnis

Diese kubischen Bézier-Kurven sind zur Verwendung in CSS gültig:

/* The canonical Bézier curve with four <number> in the [0,1] range */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* Using <integer> is valid because any <integer> is also a <number>. */
cubic-bezier(0, 0, 1, 1)

/* Negative values for ordinates are valid, leading to bouncing effects. */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Values greater than 1.0 for ordinates are also valid. */
cubic-bezier(0, 1.1, 0.8, 4)

Diese kubischen Bézier-Kurvendefinitionen sind ungültig:

/* Though the animated output type may be a color,
   Bézier curves work with numerical ratios. */
cubic-bezier(0.1, red, 1.0, green)

/* Abscissas must be in the [0, 1] range or
   the curve is not a function of time. */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* The two points must be defined, there is no default value. */
cubic-bezier(0.3, 2.1)

/* Abscissas must be in the [0, 1] range or
   the curve is not a function of time. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

Diese Easing-Funktionen sind gültig:

/* There are 5 treads, the last one happens
   right before the end of the animation. */
steps(5, end)

/* A two-step staircase, the first one happening
   at the start of the animation. */
steps(2, start)

/* The second parameter is optional. */
steps(2)

Diese Easing-Funktionen sind ungültig:

/* The first parameter must be an <integer> and
   cannot be a real value, even if it is equal to one. */
steps(2.0, jump-end)

/* The amount of steps must be non-negative. */
steps(-3, start)

/* There must be at least one step. */
steps(0, jump-none)

• CSS-Animationen
• CSS-Übergänge
• cubic-bezier
• linear() Easing-Generator