Proprietà CSS animation-timing-function
animation-timing-function è una proprietà CSS che imposta la velocità di un'animazione nel corso di ogni ciclo.
La proprietà animation-timing-function definisce come l'animazione procederà nel corso di ogni ciclo, non per l'intera durata dell'animazione. Specifica la curva di velocità dell'animazione, definendo il tempo necessario affinché un'animazione passi da un insieme di stili a un altro.
Le funzioni di timing definiscono l'interpolazione tra i fermi dei keyframe. Se per un intervallo non viene specificata una funzione di timing, viene usato il valore di animation-timing-function dell'elemento.
La proprietà animation-timing-function è una delle proprietà CSS3.
Può assumere i seguenti valori:
ease- (predefinito) Inizia lentamente, poi diventa più veloce e termina lentamente.ease-in- Inizia lentamente, ma accelera alla fine.ease-out- Inizia velocemente, ma rallenta alla fine.ease-in-out- Inizia lentamente e termina lentamente.step-start- Equivale asteps(1, start).step-end- Equivale asteps(1, end).linear- L'animazione mantiene la stessa velocità per tutta la durata; spesso è la scelta migliore per le variazioni di colore o opacità.steps(int, start|end)- Specifica una funzione a passi con due parametri. Il primo parametro definisce il numero di intervalli nella funzione e deve essere maggiore di 0. Il secondo parametro è il valore "start" o "end" e specifica il punto in cui avviene il cambiamento dei valori all'interno dell'intervallo. Se il secondo parametro viene omesso, si usa "end".cubic-bezier(n,n,n,n)- Specifica valori personalizzati per la funzione cubic-bezier. I primi due parametri definiscono le coordinate X e devono essere compresi tra 0 e 1. Gli ultimi due definiscono le coordinate Y e possono essere qualsiasi numero.
Quando vengono specificati più valori separati da virgola, questi vengono associati in ordine alle animazioni corrispondenti definite in animation-name. Se le funzioni di timing sono meno numerose delle animazioni, l'elenco viene ripetuto per coprirne il numero.
| Valore iniziale | ease |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after. |
| Ereditata | No |
| Animabile | No |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationTimingFunction = "linear"; |
Sintassi
Sintassi della proprietà CSS animation-timing-function
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;Esempio della proprietà animation-timing-function con il valore "ease":
Esempio della proprietà CSS animation-timing-function con il valore ease
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
animation: element 5s infinite;
animation-timing-function: ease;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>Esempio della proprietà animation-timing-function con il valore "ease-in":
Esempio della proprietà CSS animation-timing-function con il valore ease-in
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #8ebf42;
position: relative;
animation: element 7s infinite;
animation-timing-function: ease-in;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-timing-function Property</h1>
<div></div>
</body>
</html>Esempio della proprietà animation-timing-function con diverse funzioni di timing:
Esempio della proprietà CSS animation-timing-function con i valori linear, ease, ease-in, ease-out e ease-in-out
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
color: #eee;
font-weight: bold;
position: relative;
text-align: center;
padding: 8px;
animation: mymove 5s infinite;
}
#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;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| ease | L'animazione inizia lentamente, poi diventa più veloce e termina lentamente. È il valore predefinito. | Provalo » |
| linear | Procede a velocità costante per tutta la durata dell'animazione. | Provalo » |
| ease-in | L'animazione inizia lentamente, ma diventa più veloce alla fine. | Provalo » |
| ease-out | L'animazione inizia velocemente, ma rallenta alla fine. | Provalo » |
| ease-in-out | L'animazione inizia lentamente e termina lentamente. | Provalo » |
| step-start | Equivale a steps(1, start). | |
| step-end | Equivale a steps(1, end). | |
| steps(int,start|end) | Specifica una funzione a passi con due parametri. Il primo parametro specifica il numero di intervalli nella funzione e deve essere maggiore di 0. Il secondo parametro è il valore "start" o "end" e specifica il punto in cui avviene il cambiamento dei valori all'interno dell'intervallo. Se il secondo parametro non viene applicato, viene assegnato il valore "end". | |
| cubic-bezier (n,n,n,n) | Definisce i valori tramite la funzione cubic-bezier. I primi due parametri sono le coordinate X (da 0 a 1) e gli ultimi due sono le coordinate Y (può essere qualsiasi numero). | |
| initial | Fa usare alla proprietà il suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento genitore. |