Erstellen Sie in CSS mit der Easing-Funktion linear() komplexe Animationskurven.

Mit linear() wird eine neue Easing-Funktion in CSS eingeführt, die linear zwischen ihren Punkten interpoliert und so Bounce- und Spring-Effekte ermöglicht.

Bramus

Easings in CSS

Beim Animieren oder Überblenden von Elementen in CSS steuern Sie die Geschwindigkeit, mit der sich ein Wert ändert, mit einer Easing-Funktion. Dazu verwenden Sie die Eigenschaften animation-timing-function und transition-timing-function.

In CSS sind mehrere Keywords als Voreinstellungen verfügbar, nämlich linear, ease, ease-in, ease-out, und ease-in-out. Mit der Funktion cubic-bezier() können Sie eigene Easing-Kurven erstellen. Alternativ können Sie einen schrittweisen Ansatz mit der Easing-Funktion steps() verwenden.

Bei richtiger Verwendung verleihen Easings einem animierten Element ein Gefühl von Gewicht, da es anscheinend an Schwung gewinnt.

Komplexe Kurven wie Bounce- oder Spring-Effekte können in CSS nicht erstellt werden. Mit linear() können Sie sie jetzt jedoch erstaunlich gut nachbilden.

Einführung in linear()

Mit linear() können Sie Easings in CSS auf neue Weise definieren. Diese Funktion akzeptiert eine Reihe von Stopps, die durch Kommas getrennt sind. Jeder Stopp ist eine einzelne Zahl zwischen 0 und 1. Zwischen den einzelnen Stopps erfolgt die Interpolation linear, daher der Name der Funktion.

animation-timing-function: linear(0, 0.25, 1);

Diese Stopps sind standardmäßig gleichmäßig verteilt. Im vorherigen Snippet bedeutet das, dass der Ausgabewert 0.25 bei 50% verwendet wird.

Visualisiert sieht das Diagramm für linear(0, 0.25, 1) so aus:

Wenn die Stopps nicht gleichmäßig verteilt sein sollen, können Sie optional eine Stopplänge angeben. Wenn Sie einen Wert als Stopplänge angeben, definieren Sie den Startpunkt:

animation-timing-function: linear(0, 0.25 75%, 1);

Hier wird ein Ausgabewert von 0.25 nicht bei 50%, sondern bei 75% verwendet.

Wenn Sie zwei Werte als Stopplänge angeben, definieren Sie sowohl den Start- als auch den Endpunkt:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Ein Ausgabewert von 0,25 wird von 25% bis 75% verwendet.

Komplexe Kurven erstellen

Die vorherigen Beispiele sind einfachere Easings. Mit linear() können Sie jedoch auch komplexe Easing-Funktionen nachbilden, wenn Sie einige Abstriche bei der Genauigkeit machen.

Nehmen Sie diese Bounce-Easing-Kurve, eine Art von Easing, die in CSS nicht direkt ausgedrückt werden kann und mit JavaScript definiert wird:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Der Code sagt Ihnen vielleicht nicht viel, aber eine Visualisierung schon. Hier ist die Ausgabe, visualisiert als blaue Kurve:

Die Kurve kann vereinfacht werden, indem Sie eine Reihe von Stopps hinzufügen. Hier gibt jeder grüne Punkt einen Stopp an:

Wenn Sie die Stopps an linear() übergeben, erhalten Sie eine Kurve, die der ursprünglichen ähnelt, aber an den Rändern etwas rauer ist.

Wenn Sie das grüne animierte Feld mit dem blauen vergleichen, sehen Sie, dass es nicht so glatt ist.

Wenn Sie jedoch genügend Stopps hinzufügen, können Sie die ursprüngliche Kurve recht gut nachbilden. Hier ist eine aktualisierte Version:

Wenn Sie die Anzahl der Stopps verdoppeln, erhalten Sie bereits ein glattes Ergebnis.

Der Code für die Animation sieht so aus:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Ein Tool zur Unterstützung

Das manuelle Erstellen dieser Liste von Stopps wäre sehr umständlich. Glücklicherweise haben Jake und Adam ein Tool entwickelt, mit dem Sie eine Easing-Kurve in das entsprechende linear() Gegenstück umwandeln können.

Das Tool verwendet eine JavaScript-Easing-Funktion oder eine SVG-Kurve als Eingabe und gibt die vereinfachte Kurve mit linear() aus. Mit den Schiebereglern können Sie die Anzahl der gewünschten Stopps und ihre Genauigkeit steuern.

Rechts oben können Sie auch eine der Voreinstellungen auswählen: „Spring“, „Bounce“, „Simple elastic“ oder „Material Design emphasized easing“.

Unterstützung für die Entwicklertools

In den Entwicklertools können Sie das Ergebnis von linear() visualisieren und bearbeiten. Klicken Sie auf das Symbol , um einen interaktiven Tooltip aufzurufen, in dem Sie die Stopps ziehen können.

Diese Funktion der Entwicklertools ist ab Chrome 114 verfügbar.