CSS/Eigenschaften/animation-timing-function

Die Eigenschaft animation-timing-function legt fest, wie schnell oder langsam sich eine Animation im Verlauf der Zeit bewegt. Sie bestimmt also, ob eine Animation gleichmäßig abläuft oder zum Beispiel langsam startet, schneller wird und am Ende wieder abbremst.
Eine Visualisierung findet man unter: Animation/Übergänge.

Erlaubte Werte

• ease: Übergang mit langsamen Start, beschleunigt und endet langsam (Standardwert)
  ⇔ cubic-bezier(0.25,0.1,0.25,1)
• ease-in: Übergang mit einem langsamen Start
  ⇔ cubic-bezier(0.42,0,1,1)
• ease-out: Übergang mit einem langsamen Ende
  ⇔cubic-bezier(0,0,0.58,1)
• ease-in-out: Übergang mit einem langsamen Start und Ende
  ⇔ cubic-bezier(0.42,0,0.58,1)
• linear: Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop
  ⇔ cubic-bezier(0,0,1,1)
• linear(): Die gleichnamige CSS-Funktion erlaubt 2 oder mehr durch Kommata getrennte Zahlen von 0 bis 1 oder Prozentangaben
• cubic-bezier(n,n,n,n): Diese CSS-Funktion benötigt vier durch Kommata getrennte numerische Werte von 0 bis 1 oder Prozentangaben.
  Sie erzeugen eine Bézier-Kurve.
• steps(Anzahl) – Diese CSS-Funktion lässt die Animation schrittweise ausführen, ohne dass jede Wegmarke einzeln notiert werden muss.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

ease

anwendbar auf

alle Elemente, Pseudoelemente ::before und ::after

Vererbung

nein

animierbar

nein

Beispiel

aside {
     animation-name: beispiel;
    animation-duration: 3s;
    animation-timing-function: ease-out;
} 
@keyframes beispiel {
    from {background-color: #000;}
    to {background-color: #fff;}
}

Die Animation läuft langsam aus.

Beachten Sie: Die animation-timing-function-Eigenschaft entspricht der Web Animations-Eigenschaft easing, hat im Unterschied zu dieser jedoch den Standardwert ease anstelle von linear.

Siehe auch

• 

  mehrstufige Animationen

  komplexe Abfolgen und Bewegungsmuster

  • keyframes (Wegpunkte für die Animation)
  • Dauer und Wiederholungen
   

Weblinks

• W3C animation-timing-function