English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo animation-play-state CSS3 specifica se riprodurre o sospendere l'animazione.
La seguente tabella riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | running |
|---|---|
| Applicabile a: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | No |
| Animabile: | NoVedere: Proprietà animazione。 |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object object.style.animationPlayState="paused" |
La sintassi di questo attributo è la seguente:
animation-play-state: paused | running | initial | inherit
Il seguente esempio dimostra come utilizzare l'attributo animation-play-state.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
-webkit-animation-play-state: paused;
animation-name: moveit;
animation-duration: 2s;
animation-play-state: paused;
}
/* 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 |
|---|---|
| paused | Specifica che l'animazione è in pausa. |
| running | Specifica che l'animazione è in esecuzione. Questo è il valore predefinito. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo animation-play-state del suo elemento padre. |
Attenzione：È possibile utilizzare l'attributo animation-play-state di CSS con JavaScript per sospendere l'animazione nel mezzo del ciclo.
Compatibilità del browser per l'attributo animation-play-state, tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida：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。