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

Neu: linear(), eine Easing-Funktion in CSS, die linear zwischen ihren Punkten interpoliert. Damit lassen sich Sprung- und Federeffekte nachbilden.

Easings in CSS

Wenn Sie Elemente in CSS animieren oder übertragen, können Sie die Geschwindigkeit, mit der sich ein Wert ändert, mithilfe einer Easing-Funktion mithilfe der Eigenschaften animation-timing-function und transition-timing-function steuern.

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

Bei richtiger Verwendung geben Easings einem animierten Element einen Eindruck von der Gewichtskraft, die scheinbar Dynamik zu erlangen scheint.

In CSS ist es nicht möglich, komplexe Kurven wie Sprung- oder Federeffekte zu erstellen, aber dank linear() können Sie sie nun erstaunlich gut annähern.

Einführung in linear()

Eine neue Möglichkeit, ein Easing in CSS zu definieren, ist linear(). Für diese Funktion sind mehrere durch Kommas getrennte Haltestellen zulässig. Jede Haltestelle ist eine einzelne Zahl zwischen 0 und 1. Zwischen den einzelnen Haltestellen erfolgt die Interpolation linear und der Name der Funktion wird erläutert.

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

Die Haltestellen sind standardmäßig gleichmäßig verteilt. Im obigen Snippet bedeutet dies, dass der Ausgabewert von 0.25 an der 50 %-Marke verwendet wird.

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

Wenn Sie nicht möchten, dass die Haltestellen gleich weit voneinander entfernt sind, können Sie optional eine Haltestellenlänge angeben. Wenn Sie einen Wert als Stopplänge übergeben, definieren Sie seinen Startpunkt:

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

Hier wird der Ausgabewert 0.25 nicht an der Markierung 50%, sondern bei 75% verwendet.

Wenn Sie zwei Werte als Haltestellenlä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 mit linear() erstellen

Die Beispiele oben sind sehr einfache Easing-Funktionen. Sie können aber auch linear() verwenden, um komplexe Easing-Funktionen auf sehr einfache Weise neu zu erstellen, ohne dabei die Genauigkeit zu beeinträchtigen.

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

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;
}

Auch wenn der Code nicht viel verrät, eine Visualisierung vielleicht. Hier ist die Ausgabe in Form einer blauen Kurve:

Sie können die Kurve vereinfachen, indem Sie ihr einige Stopps hinzufügen. Hier steht jeder grüne Punkt für eine Haltestelle:

Bei der Übergabe an linear() ist das Ergebnis eine Kurve, die zwar etwas wie die ursprüngliche Kurve aussieht, an den Kanten aber etwas rauer ist.

Vergleiche die grüne animierte Box mit der blauen, um zu sehen, dass sie nicht so flüssig ist.

Wenn Sie jedoch genügend Zwischenstopps hinzufügen, können Sie sich der Originalkurve ziemlich gut annähern. Hier ist eine aktualisierte Version:

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

Der zur Animation verwendete Code 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, das Ihnen

Es wäre sehr umständlich, diese Liste mit Haltestellen manuell zu erstellen. Zum Glück haben Jake und Adam ein Tool entwickelt, mit dem Sie eine Easing-Kurve in ihr linear()-Gegenstück umwandeln können.

Das Tool verwendet eine JavaScript-Easing-Funktion oder SVG-Kurve als Eingabe und gibt die vereinfachte Kurve mit linear() aus. Mit den Schiebereglern können Sie die Anzahl der Haltestellen und deren Präzision einstellen.

Oben rechts können Sie auch eine der Voreinstellungen auswählen: „Spring“, „Bounce“, „Einfach elastisch“ oder „Material Design“ mit den hervorgehobenen Easing-Funktionen.

Support für Entwicklertools

In den Entwicklertools ist Unterstützung zum Visualisieren und Bearbeiten des Ergebnisses von linear() verfügbar. Klicken Sie auf das Symbol, um eine interaktive Kurzinfo anzuzeigen, mit der Sie die Haltestellen umherziehen können.

Diese Entwicklertools-Funktion ist in den Entwicklertools verfügbar, die ab Chrome 114 ausgeliefert werden.

Foto von Howie Mapson bei Unsplash