CSS animation-timing-function Eigenschaft

Die Eigenschaft animation-timing-function legt fest, wie eine Animation über die Dauer jedes Zyklus verläuft — nicht über die gesamte Animation hinweg. Sie bestimmt die Geschwindigkeitskurve der Animation: die Rate, mit der sich das animierte Element von einem Keyframe zum nächsten bewegt.

Diese Seite erklärt, was die Eigenschaft bewirkt, welche Werte sie akzeptiert (einschließlich cubic-bezier() und steps()), wie sie mit @keyframes und der animation-Kurzschreibweise zusammenwirkt, und welche Fallstricke dabei zu beachten sind.

Warum die Timing-Funktion wichtig ist

Die Dauer einer Animation gibt an, wie lange ein Zyklus dauert; die Timing-Funktion bestimmt, wie diese Zeit verteilt wird. Bei der gleichen Dauer von 5 Sekunden bewegt sich linear mit konstanter Geschwindigkeit, während ease langsam beginnt, in der Mitte schneller wird und zum Stillstand verlangsamt. Die richtige Kurve zu wählen ist der Unterschied zwischen einer mechanisch wirkenden und einer natürlich wirkenden Bewegung.

Timing-Funktionen definieren die Interpolation zwischen Keyframe-Stopps. Das bedeutet, Sie können innerhalb von @keyframes für einzelne Keyframes eine andere Timing-Funktion festlegen — die Funktion gilt von diesem Keyframe bis zum nächsten, nicht für die gesamte Animation. Wenn ein Keyframe keine Timing-Funktion angibt, wird der animation-timing-function-Wert des Elements für dieses Intervall verwendet.

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

Sie kann folgende Werte annehmen:

• ease - (Standard) Startet langsam, wird dann schneller und endet langsam.
• ease-in - Startet langsam, beschleunigt aber am Ende.
• ease-out - Startet schnell, verlangsamt sich aber am Ende.
• ease-in-out - Startet und endet langsam.
• step-start - Entspricht steps(1, start).
• step-end - Entspricht steps(1, end).
• linear - Die Animation hat während der gesamten Laufzeit die gleiche Geschwindigkeit, oft am besten für Farb- oder Transparenzänderungen geeignet.
• steps(int, start|end) - Gibt eine Schrittfunktion mit zwei Parametern an. Der erste Parameter definiert die Anzahl der Intervalle in der Funktion. Er muss größer als 0 sein. Der zweite Parameter ist entweder der Wert "start" oder "end" und gibt den Zeitpunkt an, zu dem die Wertänderung innerhalb des Intervalls erfolgt. Wird der zweite Parameter weggelassen, wird "end" verwendet.
• cubic-bezier(n,n,n,n) - Gibt benutzerdefinierte Werte für die Cubic-Bezier-Funktion an. Die ersten beiden Parameter definieren die X-Koordinaten und müssen zwischen 0 und 1 liegen. Die letzten beiden Parameter definieren die Y-Koordinaten und können beliebige Zahlen sein.

Wenn mehrere kommagetrennte Werte angegeben werden, werden sie den entsprechenden Animationen, die in animation-name definiert sind, der Reihe nach zugeordnet. Wenn es weniger Timing-Funktionen als Animationen gibt, wird die Liste wiederholt, um die Anzahl anzupassen.

cubic-bezier() verstehen

Alle benannten Schlüsselwörter sind Abkürzungen für eine cubic-bezier()-Kurve. Die Funktion nimmt vier Zahlen entgegen — cubic-bezier(x1, y1, x2, y2) — die die zwei Kontrollpunkte einer Bézierkurve darstellen, die von (0,0) nach (1,1) verläuft. Die X-Achse ist die Zeit (die zwischen 0 und 1 bleiben muss) und die Y-Achse ist der Animationsfortschritt (der unter 0 oder über 1 hinausgehen kann, um "Sprung"- oder "Anlauf"-Effekte zu erzeugen).

Die benannten Schlüsselwörter entsprechen:

• linear → cubic-bezier(0, 0, 1, 1)
• ease → cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in → cubic-bezier(0.42, 0, 1, 1)
• ease-out → cubic-bezier(0, 0, 0.58, 1)
• ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

steps() und gestufte Animationen

Während cubic-bezier() fließende Bewegungen erzeugt, springt steps() zwischen diskreten Zuständen — nützlich für Sprite-Sheet-Animationen oder das Blinken eines Texteingabe-Cursors. steps(4, end) unterteilt die Animation in 4 gleiche Sprünge; start lässt den ersten Sprung sofort stattfinden, während end (der Standard) ihn bis zum Ende jedes Intervalls verzögert.

Fallstricke

• Die Eigenschaft wird nicht vererbt und ist nicht animierbar. Sie können die Timing-Funktion selbst nicht animieren.
• Die Reihenfolge in der Kurzschreibweise ist wichtig. Innerhalb der animation-Kurzschreibweise sind die Timing-Funktion und animation-delay beide <time>-oder-Schlüsselwort-Werte; der erste <time>-Wert wird als Dauer und der zweite als Verzögerung gelesen. Setzen Sie daher Ihre Timing-Funktion vor den Verzögerungswert.
• Keyframe-interne Funktionen haben Vorrang. Eine Timing-Funktion, die auf einem Keyframe innerhalb von @keyframes deklariert wird, überschreibt den Eigenschaftswert für dieses Segment.

Syntax

Syntax der CSS animation-timing-function Eigenschaft

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

Beispiel der animation-timing-function Eigenschaft mit dem Wert "ease":

Beispiel der CSS animation-timing-function Eigenschaft mit dem ease-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Beispiel der animation-timing-function Eigenschaft mit dem Wert "ease-in":

Beispiel der CSS animation-timing-function Eigenschaft mit dem ease-in-Wert

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h1>The animation-timing-function Property</h1>
    <div></div>
  </body>
</html>

Beispiel der animation-timing-function Eigenschaft mit verschiedenen Timing-Funktionen:

Beispiel der CSS animation-timing-function Eigenschaft mit den Werten linear, ease, ease-in, ease-out und ease-in-out

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        color: #eee;
        font-weight: bold;
        position: relative;
        text-align: center;
        padding: 8px;
        animation: mymove 5s infinite;
      }
      #div1 {
        animation-timing-function: linear;
      }
      #div2 {
        animation-timing-function: ease;
      }
      #div3 {
        animation-timing-function: ease-in;
      }
      #div4 {
        animation-timing-function: ease-out;
      }
      #div5 {
        animation-timing-function: ease-in-out;
      }
      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>

Werte

Verwandte Eigenschaften

• animation — die Kurzschreibweise, die die Timing-Funktion zusammen mit Name, Dauer, Verzögerung und mehr festlegt.
• @keyframes — hier definieren Sie die Animationsstopps, zwischen denen die Timing-Funktion interpoliert.
• animation-duration — legt fest, wie lange ein Zyklus dauert; die Timing-Funktion verteilt die Bewegung darüber.
• animation-name — bindet das Element an eine @keyframes-Regel.
• transition-timing-function — dasselbe Konzept der Geschwindigkeitskurve, angewendet auf Übergänge statt auf Keyframe-Animationen.

Übung