Style animationTimingFunction -Eigenschaft
Beispiel
Ändern der Eigenschaft animationTimingFunction eines <div>-Elements:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Definition und Verwendung
Die animationTimingFunction gibt den Geschwindigkeitsverlauf der Animation an.
Die Geschwindigkeitskurve definiert die ZEIT, die eine Animation benötigt, um von einem Satz CSS-Stile zu einem anderen zu wechseln.
Die Geschwindigkeitskurve wird verwendet, um die Änderungen reibungslos vorzunehmen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von Moz geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Syntax
Gibt die Eigenschaft animationTimingFunction zurück:
object.style.animationTimingFunction
Legen Sie die Eigenschaft animationTimingFunction fest:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Eigenschaftswerte
Value | Description |
---|---|
linear | The animation has the same speed from start to end |
ease | Default value. The animation has a slow start, then fast, before it ends slowly |
ease-in | The animation has a slow start |
ease-out | The animation has a slow end |
ease-in-out | The animation has both a slow start and a slow end |
cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Technische Details
Standardwert: | Leichtigkeit |
---|---|
Rückgabewert: | Ein String, der die Eigenschaft animation-timing-function eines Elements darstellt |
CSS-Version | CSS3 |
Verwandte Seiten
CSS-Referenz: Eigenschaft animation-timing-function