CSS -animasie-tydberekening-funksie Eiendom
Voorbeeld
Speel 'n animasie met dieselfde spoed van begin tot einde:
div {
animation-timing-function: linear;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die animation-timing-functionspesifiseer die spoedkurwe van 'n 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.
| Standaard waarde: | gemak |
|---|---|
| Geërf: | geen |
| Animateerbaar: | geen. Lees oor animeerbaar |
| Weergawe: | CSS3 |
| JavaScript-sintaksis: | voorwerp .style.animationTimingFunction="lineêr" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz-, of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
| Property | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS-sintaksis
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Die animasie-tydberekening-funksie gebruik 'n wiskundige funksie, genaamd die Cubic Bezier-kromme, om die spoedkurwe te maak. Jy kan jou eie waardes in hierdie funksie gebruik, of gebruik een van die vooraf gedefinieerde waardes:
Eiendomswaardes
| Value | Description | Play it |
|---|---|---|
| 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 | |
| step-start | Equivalent to steps(1, start) | |
| step-end | Equivalent to steps(1, end) | |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "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 |
Wenk: Probeer die verskillende waardes in die "Meer voorbeelde"-afdeling hieronder.
Meer voorbeelde
Voorbeeld
Om die verskillende tydsberekeningfunksiewaardes beter te verstaan;
Hier is vyf verskillende <div>-elemente met vyf verskillende waardes:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Voorbeeld
Dieselfde as die voorbeeld hierbo, maar die spoedkurwes word gedefinieer met die kubieke bezier-funksie:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Verwante bladsye
CSS-tutoriaal: CSS-animasies
HTML DOM verwysing: animationTimingFunction eiendom