animation-timing-function

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-timing-function CSS Eigenschaft legt fest, wie eine Animation über die Dauer jedes Zyklus fortschreitet.

Probieren Sie es aus

animation-timing-function: linear;

animation-timing-function: ease-in-out;

animation-timing-function: steps(5, end);

animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

"use strict";

window.addEventListener("load", () => {
  const el = document.getElementById("example-element");
  const button = document.getElementById("play-pause");

  button.addEventListener("click", () => {
    if (el.classList.contains("running")) {
      el.classList.remove("running");
      button.textContent = "Play";
    } else {
      el.classList.add("running");
      button.textContent = "Pause";
    }
  });
});

Es ist oft praktisch, die Kurzschreibweiseigenschaft animation zu verwenden, um alle Animations-Eigenschaften gleichzeitig festzulegen.

Syntax

css

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* cubic-bezier() function values */
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); /* ease-in */
animation-timing-function: cubic-bezier(0, 0, 0.58, 1); /* ease-out */
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */

/* linear() function values */
animation-timing-function: linear(0, 0.25, 1);
animation-timing-function: linear(0 0%, 0.25 50%, 1 100%);
animation-timing-function: linear(0, 0.25 50% 75%, 1);
animation-timing-function: linear(0, 0.25 50%, 0.25 75%, 1);

/* steps() function values */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

Werte

<easing-function>

Die Übergangsfunktion, die einer gegebenen Animation entspricht, wie durch animation-name bestimmt.

Die nicht-stufigen Schlüsselwortwerte (ease, linear, ease-in-out, etc.) stellen jeweils kubische Bézier-Kurven mit festen Vier-Punkte-Werten dar, während der cubic-bezier() Funktionswert es ermöglicht, nicht vordefinierte Werte anzugeben. Die steps() Übergangsfunktion teilt die Eingabezeit in eine angegebene Anzahl gleichlanger Intervalle. Ihre Parameter umfassen eine Anzahl von Schritten und eine Schrittposition.

linear

Entspricht cubic-bezier(0.0, 0.0, 1.0, 1.0), animiert mit gleichmäßiger Geschwindigkeit.

ease

Entspricht cubic-bezier(0.25, 0.1, 0.25, 1.0), der Standardwert, erhöht die Geschwindigkeit in Richtung der Mitte der Animation und verlangsamt sich am Ende wieder.

ease-in

Entspricht cubic-bezier(0.42, 0, 1.0, 1.0), startet langsam, wobei die Geschwindigkeit der Übergangseigenschaft zunimmt, bis sie abgeschlossen ist.

ease-out

Entspricht cubic-bezier(0, 0, 0.58, 1.0), startet schnell und verlangsamt sich, während die Animation fortgesetzt wird.

ease-in-out

Entspricht cubic-bezier(0.42, 0, 0.58, 1.0), mit den Übergangseigenschaften, die langsam beginnen, schneller werden und dann wieder langsamer.

cubic-bezier(<number [0,1]> , <number> , <number [0,1]> , <number>)

Eine benutzerdefinierte kubische Bézier-Kurve, wobei die ersten und dritten Werte im Bereich von 0 bis 1 liegen müssen.

linear(<number> <percentage>{1,2}, …)

Die Funktion interpoliert linear zwischen den angegebenen Stopp-Punkten der Übergangsfunktion. Ein Stopp-Punkt ist ein Paar aus einem Ausgabe-Fortschritt und einem Eingabe-Prozentsatz. Der Eingabe-Prozentsatz ist optional und wird abgeleitet, wenn er nicht angegeben ist. Wird kein Eingabe-Prozentsatz angegeben, werden die ersten und letzten Stopp-Punkte auf 0% und 100% gesetzt, und die Stopp-Punkte in der Mitte erhalten Prozentsatz-Werte, die durch lineare Interpolation zwischen den nächstgelegenen vorherigen und nächsten Punkten, die einen Prozentsatz-Wert haben, abgeleitet werden.

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

Zeigt eine Animationsiteration entlang n Haltepunkten während des Übergangs an, wobei jeder Haltepunkt für gleich lange Zeiten angezeigt wird. Wenn z. B. n 5 ist, gibt es 5 Haltepunkte. Ob die Animation vorübergehend bei 0%, 20%, 40%, 60% und 80%, auf 20%, 40%, 60%, 80% und 100% hält oder 5 Haltepunkte zwischen 0% und 100% macht, oder 5 Haltepunkte einschließlich der 0% und 100% Marken (bei 0%, 25%, 50%, 75% und 100%) hängt davon ab, welche der folgenden Schrittpositionen verwendet wird:

jump-start: Bezeichnet eine links-stetige Funktion, sodass der erste Sprung erfolgt, wenn die Animation beginnt.
jump-end: Bezeichnet eine rechts-stetige Funktion, sodass der letzte Sprung erfolgt, wenn die Animation endet. Dies ist der Standardwert.
jump-none: Es gibt keinen Sprung an einem der Enden, wodurch während der Interpolation effektiv ein Schritt entfernt wird. Stattdessen hält er sowohl bei der 0%- als auch bei der 100%-Marke jeweils für 1/n der Dauer.
jump-both: Umfasst Pausen sowohl bei der 0%- als auch bei der 100%-Marke, wodurch während der Animationsiteration effektiv ein Schritt hinzugefügt wird.
start: Dasselbe wie jump-start.
end: Dasselbe wie jump-end.

step-start

Entspricht steps(1, jump-start)

step-end

Entspricht steps(1, jump-end)

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-* Eigenschaft angeben, werden sie auf die Animationen in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.

Hinweis: animation-timing-function hat denselben Effekt bei der Erstellung von CSS scroll-gesteuerten Animationen wie bei regulären zeitbasierten Animationen.

Beschreibung

Übergangsfunktionen können für einzelne Schlüsselbilder in einer @keyframes-Regel angegeben werden. Wenn kein animation-timing-function für ein Schlüsselbild angegeben ist, wird der entsprechende Wert von animation-timing-function von dem Element verwendet, auf das die Animation angewendet wird.

Innerhalb eines Schlüsselbilds ist animation-timing-function ein auf die Regel beschränkter Deskriptor, nicht die Eigenschaft mit demselben Namen. Das Timing wird nicht animiert. Vielmehr wird die Übergangsfunktion eines Schlüsselbilds auf Eigenschaft-für-Eigenschaft-Basis von dem Schlüsselbild, auf dem sie angegeben ist, bis zum nächsten Schlüsselbild, das diese Eigenschaft angibt, angewendet, oder bis zum Ende der Animation, wenn kein nachfolgendes Schlüsselbild diese Eigenschaft angibt. Daher wird eine in dem 100% oder to Schlüsselbild angegebene animation-timing-function nie verwendet.

Formale Definition

Anfangswert	`ease`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

animation-timing-function = 
  <easing-function>#  

<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

Beispiele

Alle Beispiele in diesem Abschnitt animieren die width und background-color Eigenschaften mehrerer <div>-Elemente mit unterschiedlichen animation-timing-function Werten. Die Breite wird von 0 auf 100% animiert, und die Hintergrundfarbe wird von limettenfarben auf magentafarben animiert.

Lineare Funktionsbeispiele

Das Beispiel zeigt die Effekte verschiedener linear() Übergangsfunktionen.

<div class="parent">
  <div class="linear">'linear' value</div>
  <div class="linear-fn1">linear(0, 0.5 50%, 1)</div>
  <div class="linear-fn2">linear(0, 0.25 75%, 1)</div>
  <div class="linear-fn3">linear(0, 0.75 25%, 1)</div>
  <div class="linear-fn4">linear(0, 0.5 25% 75%, 1)</div>
  <div class="linear-fn5">linear(0, 0.25 45%, 0.75 55%, 0.5 70%, 1)</div>
  <div class="linear-fn6">linear(0, 1.2 50%, 0.75 80%, 1)</div>
  <div class="linear-fn7">linear(0, 0.5 75%, 1 120%)</div>
</div>
<div class="x-axis"><span>25%</span><span>50%</span><span>75%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 24.8%,
    grey 24.8%,
    grey 25.2%,
    white 25.2%,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%,
    white 74.8%,
    grey 74.8%,
    grey 75.2%,
    white 75.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}
.linear-fn1 {
  animation-timing-function: linear(0, 0.5 50%, 1);
}
.linear-fn2 {
  animation-timing-function: linear(0, 0.25 75%, 1);
}
.linear-fn3 {
  animation-timing-function: linear(0, 0.75 25%, 1);
}
.linear-fn4 {
  animation-timing-function: linear(0, 0.5 25% 75%, 1);
}
.linear-fn5 {
  animation-timing-function: linear(0, 0.25 45%, 0.75 55%, 0.5 70%, 1);
}
.linear-fn6 {
  animation-timing-function: linear(0, 1.2 50%, 0.75 80%, 1);
}
.linear-fn7 {
  animation-timing-function: linear(0, 0.5 75%, 1 120%);
}

Das folgende Bild zeigt Grafiken aller in diesem Beispiel verwendeten linear() Funktionswerte. Der Eingabe-Fortschritt (Zeit) wird auf der x-Achse und der Ausgabe-Fortschritt auf der y-Achse dargestellt. Entsprechend der Syntax reicht der Eingabe-Fortschritt von 0 bis 100% und der Ausgabe-Fortschritt von 0 bis 1.

Ein Bild, das 'linear' Funktionsgrafiken zeigt

Beachten Sie, dass der Output sowohl vorwärts als auch rückwärts gehen kann.

Kubik-Bézier-Beispiele

Das Beispiel zeigt die Effekte verschiedener Bézier-Kurven-Übergangsfunktionen.

<div class="parent">
  <div class="linear">linear</div>
  <div class="ease">ease</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="cb">cubic-bezier(.5, -0.5, 1, 1.5)</div>
</div>
<div class="x-axis"><span>50%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}
.ease {
  animation-timing-function: ease;
}
.ease-in {
  animation-timing-function: ease-in;
}
.ease-out {
  animation-timing-function: ease-out;
}
.ease-in-out {
  animation-timing-function: ease-in-out;
}
.cb {
  animation-timing-function: cubic-bezier(0.5, -0.5, 1, 1.5);
}

Das folgende Bild zeigt Grafiken aller in diesem Beispiel verwendeten kubischen Bézier-Funktionswerte. Der Eingabe-Fortschritt (Zeit) reicht von 0 bis 1 und der Ausgabe-Fortschritt reicht von 0 bis 1.

Ein Bild, das 'cubic-bezier' Funktionsgrafiken zeigt

Schritt-Beispiele

Dieses Beispiel zeigt die Effekte mehrerer Schrittübergangsfunktionswerte.

<div class="parent">
  <div class="linear">linear</div>
  <div class="start">steps(4, start)</div>
  <div class="jump-start">steps(4, jump-start)</div>
  <div class="end">steps(4, end)</div>
  <div class="jump-end">steps(4, jump-end)</div>
  <div class="jump-both">steps(4, jump-both)</div>
  <div class="jump-none">steps(4, jump-none)</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
<div class="x-axis"><span>25%</span><span>50%</span><span>75%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 24.8%,
    grey 24.8%,
    grey 25.2%,
    white 25.2%,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%,
    white 74.8%,
    grey 74.8%,
    grey 75.2%,
    white 75.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}

.start {
  animation-timing-function: steps(4, start);
}
.jump-start {
  animation-timing-function: steps(4, jump-start);
}
.end {
  animation-timing-function: steps(4, end);
}
.jump-end {
  animation-timing-function: steps(4, jump-end);
}
.jump-both {
  animation-timing-function: steps(4, jump-both);
}
.jump-none {
  animation-timing-function: steps(4, jump-none);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}

Das folgende Bild zeigt Grafiken aller in diesem Beispiel verwendeten step() Funktionswerte. Der Eingabe-Fortschritt (Zeit) und der Ausgabe-Fortschritt reichen von 0 bis 1.

Bild zeigt 'steps' Funktionsgrafiken

Spezifikationen

Specification
CSS Animations Level 1 # animation-timing-function
CSS Easing Functions Level 1 # linear-easing-function-parsin

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Animationen
<easing-function>
JavaScript AnimationEvent API
Cubic Bézier-Generator-Tool
Andere verwandte Animationseigenschaften: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline