English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo animation-timing-function di CSS3 specifica come la durata di ogni ciclo dell'animazione dovrebbe essere gestita.
La tabella seguente riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | ease |
|---|---|
| Applicabile a: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | NoVedere: Proprietà animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object object.style.animationTimingFunction="linear" |
La sintassi di questo attributo è la seguente:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
Il seguente esempio dimostra come utilizzare l'attributo animation-timing-function.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
animation-name: moveit;
animation-duration: 2s;
animation-timing-function: ease-in;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Prova a vedere‹/›La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| linear | Specifica che l'animazione avvenga a velocità costante dallo stato iniziale allo stato finale. |
| ease | Simile a ease-in-out, ma accelera più rapidamente all'inizio e inizia a decelerare vicino al centro. |
| ease-in | Specifica che l'animazione inizi lentamente, acceleri gradualmente fino a raggiungere lo stato finale e poi si fermi all'improvviso. |
| ease-out | Specifica che l'animazione si avvii rapidamente, poi rallenti gradualmente quando si avvicina al suo stato finale. |
| ease-in-out | Specifica che l'animazione inizi lentamente, acceleri poi decelera quando si avvicina al suo stato finale. |
cubic-bezier(n,n,n,n) | Definisce una curva di Bezier a tre punti. Anche chiamata curva di velocità. I valori possibili sono numeri tra 0 e 1. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo animation-timing-function del suo elemento padre. |
Compatibilità del browser per l'attributo animation-timing-function, tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:Animazione CSS3.
Proprietà e regole correlate:animation,animation-name,animation-duration,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.