Stijl animatieTimingFunctie Eigenschap
Voorbeeld
De eigenschap AnimationTimingFunction van een <div>-element wijzigen:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Definitie en gebruik
De animatieTimingFunction specificeert de snelheidscurve van de animatie.
De snelheidscurve definieert de TIJD die een animatie gebruikt om van de ene set CSS-stijlen naar de andere te gaan.
De snelheidscurve wordt gebruikt om de veranderingen soepel te laten verlopen.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Nummers gevolgd door Moz geven de eerste versie aan die met een voorvoegsel werkte.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Syntaxis
Retourneer de eigenschap AnimationTimingFunction:
object.style.animationTimingFunction
Stel de eigenschap AnimationTimingFunction in:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Eigendomswaarden
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
Standaardwaarde: | gemak |
---|---|
Winstwaarde: | Een tekenreeks, die de eigenschap animatie-timing-functie van een element vertegenwoordigt |
CSS-versie | CSS3 |
Gerelateerde pagina's
CSS-referentie: eigenschap animatie-timing-functie