animation-timing-function: Animationspfad festlegen
Anzeige Hier werben
animation-timing-function
Werte: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()
Standardwert: ease
Vererbung: Ja
Kurzschreibweise: -
Anwendbar auf: alle Elemente
CSS-Level: CSS3
Die Eigenschaft animation-timing-function bestimmt, welchen Weg (Animationspfad) die Animation fährt.
Werte
Es gibt bereits festgelegte Begriffe für die Bewegungsabläufe. Sie alle sind Teil von cubic-bezier(), mit dem sich die Pfade direkt angeben lassen.
| Name |
Bedeutung |
cubic-bezier() |
Vier mit Komma getrennte Werte ergeben die Punkte P1 und P2 mit den jeweiligen Koordinaten (x1, y1, x2, y2). Die Werte liegen einschließlich zwischen 0 und 1. |
|---|---|
ease |
Entspricht cubic-bezier(0.25, 0.1, 0.25, 1.0) |
linear |
Entspricht cubic-bezier(0.0, 0.0, 1.0, 1.0) |
ease-in |
Entspricht cubic-bezier(0.42, 0, 1.0, 1.0) |
ease-out |
Entspricht cubic-bezier(0, 0, 0.58, 1.0) |
ease-in-out |
Entspricht cubic-bezier(0.42, 0, 0.58, 1.0) |
Verständnis
Beispiel
1 2 3 | DIV.animation {
animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.1);
}
|
Die Animation dauert genau 250 Millisekunden lang.
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "animation-timing-function: Animationspfad festlegen" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "animation-timing-function: Animationspfad festlegen" hier bearbeiten.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.