English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo animation CSS è una abbreviazione di breve per i seguenti attributianimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-modeEanimation-play-state.
La tabella seguente riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | none 0 ease 0 1 normal none running; |
|---|---|
| Applicabile a: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | No.Vedere: Attributo animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object.style.animation="mymove 5s infinite" |
La sintassi di questo attributo è la seguente:
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit
Il seguente esempio dimostra come utilizzare l'attributo animation.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: moveit 2s linear 0s infinite alternate;
animation: moveit 2s linear 0s infinite 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:È necessario specificare almeno due attributi animation-name e animation-duration (maggiore di 0) per far avvenire l'animazione.
La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| animation-name | Specifica il nome dell'animazione @keyframes da applicare all'elemento selezionato. |
| animation-duration | Specifica il tempo necessario per completare un ciclo di animazione in secondi o millisecondi. |
| animation-timing-function | Specifica come l'animazione deve procedere durante ogni ciclo, ossia la funzione di accelerazione. |
| animation-delay | Specifica il ritardo prima dell'inizio dell'animazione. |
| animation-iteration-count | Specifica il numero di volte che l'animazione deve riprodursi prima di fermarsi. |
| animation-direction | Specifica se l'animazione deve riprodursi in senso inverso in un ciclo alternato. |
| animation-fill-mode | Specifica come lo stile deve essere applicato al target dell'animazione CSS prima e dopo l'esecuzione. |
| animation-play-state | Specifica se l'animazione deve essere eseguita o in pausa. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo animation del suo elemento padre. |
Compatibilità dei browser per le proprietà di animazione, tutti i browser principali supportano questa proprietà. Il numero indica la versione del primo browser che supporta questa proprietà.
|
Ecco i tutorial da consultare:Animazione CSS3.
Proprietà e regole correlate:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.