Beispiel
Ändern der animationTimingFunction Eigenschaft eines <div> Element:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Versuch es selber " Definition und Verwendung
Die animationTimingFunction gibt die Geschwindigkeitskurve der Animation.
Die Geschwindigkeitskurve definiert die Zeit, eine Animation aus einem Satz von CSS-Stilen zu einem anderen wechseln verwendet.
Die Geschwindigkeitskurve wird verwendet, um die Änderungen glatt zu machen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von Moz geben Sie die erste Version, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| animationTimingFunction | 43.0 | Nicht unterstützt | 16.0 5,0 Moz | Nicht unterstützt | 30.0 |
Syntax
Bringen Sie die animationTimingFunction Eigenschaft:
object .style.animationTimingFunction Stellen Sie die animationTimingFunction Eigenschaft:
object .style.animationTimingFunction="linear|ease|ease-in|ease-out|cubic-bezier( Eigenschaftswerte Wert Beschreibung linear Die Animation hat die gleiche Geschwindigkeit von Anfang bis Ende ease Standardwert. Die Animation hat einen langsamen Start, dann schnell, bevor es langsam endet ease-in Die Animation hat einen langsamen Start ease-out Die Animation hat ein langsames Ende ease-in-out Die Animation hat sowohl einen langsamen Start und ein langsames Ende cubic- bezier( n , n , n , n ) Definieren Sie Ihre eigenen Werte in der kubisch-Bezier-Funktion
Mögliche Werte sind numerische Werte von 0 bis 1 initial Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang inherit Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben
Technische Details
Standardwert: Leichtigkeit Rückgabewert: Ein String, die die Animation-Timing-Funktion Eigenschaft eines Elements CSS Version CSS3
Verwandte Seiten
CSS - Referenz: animation-timing-function property
<Style - Objekt