Styl animasie Tydsberekening Funksie Eiendom
Voorbeeld
Verander die animationTimingFunction-eienskap van 'n <div>-element:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Definisie en gebruik
Die animationTimingFunction spesifiseer die spoedkurwe van die animasie.
Die spoedkurwe definieer die TYD wat 'n animasie gebruik om van een stel CSS-style na 'n ander te verander.
Die spoedkurwe word gebruik om die veranderinge glad te maak.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur Moz spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Sintaksis
Gee die animationTimingFunction-eienskap terug:
object.style.animationTimingFunction
Stel die animationTimingFunction-eienskap:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Eiendomswaardes
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 |
Tegniese besonderhede
Standaard waarde: | gemak |
---|---|
Terugkeerwaarde: | 'n String, wat die animasie-tydsberekening-funksie-eienskap van 'n element verteenwoordig |
CSS weergawe | CSS3 |
Verwante bladsye
CSS verwysing: animasie-tydsberekening-funksie eiendom