English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo CSS animation-direction specifica se l'animazione dovrebbe riprodursi in senso inverso in un ciclo alternato.
La tabella seguente riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | normal |
|---|---|
| Applicabile a: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | No.Vedere anche Proprietà animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object.style.animationDirection="inverso" |
La sintassi di questo attributo è la seguente:
animation-direction: normale | inverso | alternare | inverso-alternare | iniziale | eredito
Il seguente esempio dimostra come utilizzare l'attributo animation-direction.
.box {
width: 50px;
height: 50px;
background: rosso;
position: relativo;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternare;
animation-name: moveit;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Prova a vedere < › >Attenzione:Se l'animazione è impostata per ripetere una sola volta, l'attributo animation-direction non ha effetto, vedere:animation-iteration-countAttributo
La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| normal | L'animazione dovrebbe ripetersi in ogni ciclo. Questo è il valore predefinito. |
| reverse | L'animazione dovrebbe ripetersi all'indietro in ogni ciclo. |
| alternate | L'animazione riprende in avanti nel primo ciclo, poi in avanti, poi continua a alternare. |
| alternate-reverse | L'animazione riprende in avanti nel primo ciclo, poi in avanti, poi continua a alternare. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato della proprietà animation-direction del suo elemento padre. |
Compatibilità del browser per la proprietà animation-direction, tutti i browser principali supportano questa proprietà.
|
Ecco alcune guide da consultare:Animazione CSS3.
Proprietà e regole correlate:animation,animation-name,animation-delay,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.