CSS transition-timing-function Eigenschaft

Die CSS-Eigenschaft transition-timing-function legt die Geschwindigkeitskurve eines Übergangs fest — also wie die Zwischenwerte während der Übergangsdauer berechnet werden. Sie ändert nicht, wie lange ein Übergang dauert (dafür ist transition-duration zuständig); stattdessen steuert sie das Tempo dazwischen.

Warum ist das wichtig? Ein Übergang, der mit konstanter Geschwindigkeit läuft (linear), wirkt oft mechanisch. Reale Bewegungen beschleunigen und verlangsamen sich, daher fühlt sich die Standard-ease-Kurve — langsamer Start, schnelle Mitte, langsames Ende — für das Auge viel natürlicher an. Die richtige Timing-Funktion zu wählen ist das, was eine elegante UI-Animation von einer steifen unterscheidet.

Die Eigenschaft transition-timing-function ist eine der CSS3-Eigenschaften.

Diese Seite behandelt die Schlüsselwortwerte, die leistungsstarken Funktionen cubic-bezier() und steps(), wie man pro Eigenschaft eine eigene Kurve festlegt und die häufigsten Fallstricke.

Schlüsselwortwerte

Die Eigenschaft akzeptiert die folgenden benannten Kurven:

ease — langsamer Start, schnelle Mitte, langsames Ende (der Standardwert)
linear — konstante Geschwindigkeit durchgehend
ease-in — langsamer Start, beschleunigt gegen Ende
ease-out — schneller Start, verlangsamt gegen Ende
ease-in-out — langsamer Start und langsames Ende, schneller in der Mitte
step-start — springt sofort zum Endwert (kein Zwischenschritt)
step-end — hält den Startwert, springt dann am Ende

Jedes Schlüsselwort ist lediglich eine Abkürzung für eine zugrunde liegende cubic-bezier()- oder steps()-Definition — beispielsweise entspricht linear dem Wert cubic-bezier(0, 0, 1, 1) und ease dem Wert cubic-bezier(0.25, 0.1, 0.25, 1).

Anfangswert	ease
Gilt für	Alle Elemente, Pseudo-Elemente ::before und ::after.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.transitionTimingFunction = "ease";

Syntax

CSS transition-timing-function Werte

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Wenn ein Wert weggelassen wird, verwendet der Browser den Anfangswert ease.

Beispiel für transition-timing-function

Im folgenden Beispiel werden zwei Eigenschaften gleichzeitig animiert. Die erste Timing-Funktion gilt für die erste transition-property (background-color) und die zweite für left. Die cubic-bezier()-Kurve überschreitet hier absichtlich den Wert 1, sodass das Element leicht über sein Ziel hinausschwingt — etwas, das keiner der Schlüsselwortwerte bewirken kann.

CSS transition-timing-function Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <p>Hover over the element to see the effect</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel für transition-timing-function mit den Werten "ease", "linear", "ease-in" und "ease-out"

CSS transition-timing-function Werte Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: ease;
      }
      .el2 {
        transition-timing-function: linear;
      }
      .el3 {
        transition-timing-function: ease-in;
      }
      .el4 {
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Probier es selbst »

Bewegen Sie den Mauszeiger über den Container und beobachten Sie, wie die vier Kreise laufen: linear hält ein gleichmäßiges Tempo, ease-in hinkt zunächst hinterher und holt dann auf, und ease-out schießt vor und verlangsamt sich dann.

Beispiel für transition-timing-function mit den Werten "step-start" und "step-end"

CSS transition-timing-function weiteres Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: step-start;
      }
      .el2 {
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Probier es selbst »

Die cubic-bezier()-Funktion

Jede Schlüsselwortkurve basiert auf einer kubischen Bézier-Kurve, und cubic-bezier(x1, y1, x2, y2) erlaubt es Ihnen, eine eigene zu definieren. Die vier Zahlen sind die Koordinaten von zwei Kontrollpunkten; der Startpunkt (0, 0) und der Endpunkt (1, 1) sind fest.

/* a gentle ease-out */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* an overshoot/"bounce" — the y values can go below 0 or above 1 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Die x-Werte (x1, x2) müssen im Bereich 0–1 bleiben, aber die y-Werte dürfen diesen Bereich überschreiten — genau so erzeugt man einen Überschwing- oder Antizipationseffekt. Dies ist der flexibelste Wert und lohnt sich, wenn die Schlüsselwortwerte zu generisch erscheinen.

Die steps()-Funktion

steps(n, position) lässt den Übergang in n diskreten Schritten springen, anstatt ihn gleichmäßig zu bewegen — nützlich für Sprite-Sheet-Animationen, Schreibmaschineneffekte oder alles, was „ticken" statt gleiten soll.

/* 4 equal jumps */
transition-timing-function: steps(4, end);

Das optionale zweite Argument bestimmt, ob der Sprung am Anfang oder Ende jedes Intervalls erfolgt (Standard ist end). Die Schlüsselwörter step-start und step-end sind einfach steps(1, start) bzw. steps(1, end).

Eine Kurve pro Eigenschaft festlegen

Wenn Sie mehrere Eigenschaften gleichzeitig animieren, können Sie eine kommagetrennte Liste von Timing-Funktionen angeben. Jede entspricht dem zugehörigen Eintrag in transition-property:

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.27, 1.55);

Wenn Sie weniger Timing-Funktionen als Eigenschaften angeben, wird die Liste wiederholt; wenn Sie mehr angeben, werden die überzähligen ignoriert.

Häufige Fallstricke

Sie steuert nur das Tempo, nicht die Zeit. Eine schneller wirkende Kurve endet nicht früher — ändern Sie dafür transition-duration.
x muss in [0, 1] bleiben. Bei cubic-bezier() macht ein x-Wert außerhalb des gültigen Bereichs die gesamte Deklaration ungültig und der Browser fällt auf ease zurück.
Reihenfolge in Listen ist wichtig. Die N-te Timing-Funktion entspricht der N-ten transition-property, nicht einem Namen — halten Sie die Listen aufeinander abgestimmt.
Bevorzugen Sie die transition-Kurzschreibweise für Produktionscode; die hier gezeigten Langformen dienen hauptsächlich der Übersichtlichkeit.

Werte

Wert	Beschreibung
ease	Der Übergangseffekt beginnt langsam, wird dann schneller und endet langsam. Dies ist der Standardwert.
linear	Der Übergangseffekt verläuft von Anfang bis Ende mit konstanter Geschwindigkeit.
ease-in	Der Übergangseffekt beginnt langsam und beschleunigt gegen Ende.
ease-out	Der Übergangseffekt beginnt schnell, verlangsamt sich jedoch am Ende.
ease-in-out	Der Übergangseffekt beginnt langsam und endet langsam.
step-start	Entspricht `steps(1, start)`.
step-end	Entspricht `steps(1, end)`.
steps(int,start\|end)	Legt eine Schrittfunktion mit zwei Parametern fest. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion an. Er muss größer als 0 sein. Der zweite Parameter ist entweder der Wert "start" oder "end" und gibt den Zeitpunkt an, an dem der Wertwechsel innerhalb des Intervalls stattfindet. Wird der zweite Parameter nicht angegeben, gilt der Wert "end".
cubic-bezier (n,n,n,n)	Legt eine kubische Bézier-Kurve fest, um die Beschleunigung und Verlangsamung des Übergangs zu definieren.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Die Eigenschaft wird vom übergeordneten Element geerbt.

Übung

Die CSS-Eigenschaft transition-timing-function hat folgende Werte, außer

ease-in-outstep-endpausedlinear