Proprietà CSS funzione di temporizzazione dell'animazione
Esempio
Riproduci un'animazione con la stessa velocità dall'inizio alla fine:
div {
animation-timing-function: linear;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Specifica la animation-timing-functioncurva di velocità di un'animazione.
La curva di velocità definisce il TEMPO che un'animazione utilizza per passare da un insieme di stili CSS a un altro.
La curva di velocità viene utilizzata per apportare le modifiche senza intoppi.
| Valore di default: | sollievo |
|---|---|
| Ereditato: | no |
| Animabile: | no. Leggi su animabile |
| Versione: | CSS3 |
| sintassi JavaScript: | oggetto .style.animationTimingFunction="lineare" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
| 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- |
Sintassi CSS
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;
La funzione di temporizzazione dell'animazione utilizza una funzione matematica, chiamata curva di Bezier cubica, per creare la curva di velocità. È possibile utilizzare i propri valori in questa funzione o utilizzare uno dei valori predefiniti:
Valori di proprietà
| 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 |
Suggerimento: prova i diversi valori nella sezione "Altri esempi" di seguito.
Altri esempi
Esempio
Per comprendere meglio i diversi valori della funzione di temporizzazione;
Ecco cinque diversi elementi <div> con cinque diversi valori:
#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;}
Esempio
Come nell'esempio sopra, ma le curve di velocità sono definite con la funzione cubic-bezier:
#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);}
Pagine correlate
Tutorial CSS: Animazioni CSS
Riferimento HTML DOM: proprietà animationTimingFunction