w3docs logo

CSS-Eigenschaft animation-timing-function

Die Eigenschaft animation-timing-function definiert, wie die Animation über die Dauer jedes Zyklus und nicht über die gesamte Animation verläuft.

Es kann die folgenden Werte haben:

  • ease - (voreingestellt) die Animation beginnt langsam, wird dann schneller und endet langsam.
  • ease-in - die Animation startet langsam, beschleunigt sich aber am Ende und stoppt abrupt.
  • ease-out - die Animation hat einen schnellen Start, verlangsamt sich aber am Ende.
  • ease-in-out - die Animation hat sowohl einen langsamen Start als auch ein langsames Ende.
  • step-start- gleich 1, Start.
  • step-end- gleich 1, Ende.
  • linear - die Animation hat während der gesamten Animation die gleiche Geschwindigkeit; oft wird sie am besten für Farb- oder Deckkraftänderungen verwendet.
  • steps(int,start|end)- spezifiziert eine Schrittfunktion mit zwei Parametern. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion an. Der zweite Parameter ist entweder der Wert "start" oder "end", und gibt den Punkt an, an dem die Änderung der Werte innerhalb des Intervalls stattfindet. Wenn der zweite Parameter nicht angewendet wird, wird der Wert "end" angegeben.
  • cubic-bezier (n,n,n,n) - es definiert Ihre eigenen Werte in der cubic-bezier-Funktion. Mögliche Werte sind Zahlenwerte von 0 bis 1.
Anfangswert ease
Gilt für Alle Elemente. Es gilt für die Pseudo-Elemente ::before und ::after.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.animationTimingFunction = "linear";

Syntax

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

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s infinite; /* Safari 4.0 - 8.0 */
      -webkit-animation-timing-function: ease; /* Safari 4.0 - 8.0 */
      animation: element 5s infinite;
      animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
      @keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-timing-function</h2>
    <div></div>
  </body>
</html>

Ein anderes Beispiel mit dem Wert "ease-in".

Beispiel

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: #8ebf42;
  position: relative;
  -webkit-animation: element 7s infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-timing-function: ease-in; /* Safari 4.0 - 8.0 */
  animation: element 7s infinite;
  animation-timing-function: ease-in;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
  from {left: 0px;}
  to {left: 200px;}
}
@keyframes element {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>
<h1>Die Eigenschaft animation-timing-function</h1>
<div></div>
</body>
</html>

Sehen wir uns ein Beispiel an, in dem verschiedene Werte von timing function dargestellt sind.

Beispiel

<!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;
      -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
      animation: mymove 5s infinite;
      }
      /* Safari 4.0 - 8.0 */
      #div1 {-webkit-animation-timing-function: linear;}
      #div2 {-webkit-animation-timing-function: ease;}
      #div3 {-webkit-animation-timing-function: ease-in;}
      #div4 {-webkit-animation-timing-function: ease-out;}
      #div5 {-webkit-animation-timing-function: ease-in-out;}
      #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;}
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
      @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-timing-function</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

Wert Beschreibung
ease Die Animation beginnt langsam, wird dann schneller und endet langsam. Das ist der Standardwert.
linear Die Animation startet mit der gleichen Geschwindigkeit.
ease-in Die Animation startet langsam, beschleunigt sich aber am Ende und stoppt abrupt.
ease-out Die Animation hat einen schnellen Start, verlangsamt sich aber am Ende.
ease-in-out Die Animation hat sowohl einen langsamen Start als auch ein langsames Ende.
step-start gleich 1, Start.
step-end gleich 1, Ende.
steps(int,start|end) Es definiert eine Schrittfunktion mit zwei Parametern. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion an. Der zweite Parameter ist entweder der Wert "start" oder "end", und gibt den Punkt an, an dem die Änderung der Werte innerhalb des Intervalls stattfindet. Wenn der zweite Parameter nicht angewendet wird, wird der Wert "end" angegeben.
cubic-bezier (n,n,n,n) Es definiert Ihre eigenen Werte in der cubic-bezier-Funktion. Mögliche Werte sind Zahlenwerte von 0 bis 1.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit- 		16.0+
5.0-15.0 -moz- 		9.0+
5.1-8.0 -webkit- 		12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Was sind die verschiedenen CSS Animation Timing-Funktionen, die in dem gegebenen Artikel erwähnt werden?
Finden Sie das nützlich?