English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo animation-fill-mode di CSS3 specifica come lo stile viene applicato al target dell'animazione prima e dopo l'esecuzione dell'animazione.
La tabella seguente riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | none |
|---|---|
| Applicabile a: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | NoVedere anche Attributi animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object.style.animationFillMode="forwards" |
La sintassi di questo attributo è la seguente:
animation-fill-mode: none | forwards | backwards | both | initial | inherit
Il seguente esempio dimostra come utilizzare l'attributo animation-fill-mode.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-name: moveit;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* 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 |
|---|---|
| none | L'animazione non applicherà alcun stile al target prima o dopo l'esecuzione. |
| forwards | Dopo la fine dell'animazione (determinato daanimation-iteration-count). L'attributo verrà applicato all'animazione alla fine dell'animazione. |
| backwards | L'animazione applicherà i valori delle proprietà definite nella keyframe, che sarà determinata daanimation-delayL'iterazione dell'animazione inizia all'inizio del periodo definito dall'attributo, questi sono i valori della keyframe from (animation-directionper normal o alternate) o per il valore della keyframe to (animation-directionper reverse o alternate-reverse). |
| both | L'animazione seguirà le regole in avanti e indietro, espandendo così le proprietà dell'animazione in entrambe le direzioni. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato adotta il valore calcolato dell'attributo animation-fill-mode del suo elemento padre. |
Compatibilità dei browser per l'attributo animation-fill-mode, tutti i browser mainstream supportano questa proprietà.
|
Ecco una guida da consultare:Animazioni CSS3.
Proprietà e regole correlate: animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state,@keyframes.