CSS animatie-timing-functie Eigenschap
Voorbeeld
Speel een animatie af met dezelfde snelheid van begin tot eind:
div {
animation-timing-function: linear;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De animation-timing-functionspecificeert de snelheidscurve van een 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.
| Standaardwaarde: | gemak |
|---|---|
| geërfd: | Nee |
| Animeerbaar: | Nee. Lees over animeren |
| Versie: | CSS3 |
| JavaScript-syntaxis: | object .style.animationTimingFunction="lineair" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
| 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-syntaxis
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;
De animatie-timing-functie gebruikt een wiskundige functie, de Cubic Bezier-curve genaamd, om de snelheidscurve te maken. U kunt uw eigen waarden in deze functie gebruiken, of een van de vooraf gedefinieerde waarden gebruiken:
Eigendomswaarden
| 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 |
Tip: Probeer de verschillende waarden in het gedeelte 'Meer voorbeelden' hieronder.
Meer voorbeelden
Voorbeeld
Om de verschillende waarden van de timingfunctie beter te begrijpen;
Hier zijn vijf verschillende <div>-elementen met vijf verschillende waarden:
#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
Hetzelfde als het bovenstaande voorbeeld, maar de snelheidscurves worden gedefinieerd met de kubieke-bezier-functie:
#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);}
Gerelateerde pagina's
CSS-zelfstudie: CSS-animaties
HTML DOM-referentie: animatieTimingFunction-eigenschap