Manuale di riferimento CSS

Regole @ di CSS (RULES)

Manuale completo delle proprietà CSS

Proprietà animation-play-state CSS3 Proprietà animation-iteration-count CSS3

Metodo di utilizzo e esempio dell'attributo animation-name di CSS3

Il nome @keyframes specificato dall'attributo CSS animation-name dovrebbe essere applicato all'elemento selezionato per definire l'animazione.

La tabella seguente riassume l'ambito di utilizzo e la cronologia delle versioni di questa proprietà.

Valore predefinito:	none
Applicabile a:	Tutti gli elementi::before e::after Elementi pseudo
Ereditarietà:	Nessuno
Animabile:	No.Si prega di consultare Proprietà dell'animazione.
Versione:	Nuova funzionalità di CSS3
Sintassi JavaScript:	object　　　object.style.animationName="mymove"

Sintassi dell'uso di animation-name

L'interfaccia sintattica di questa proprietà è la seguente:

animation-name:　keyframe-name　|　none　|　initial　|　inherit

Ecco un esempio che dimostra come utilizzare l'attributo animation-name.

Esempio

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Prova a vedere‹/›

Valore dell'attributo

La tabella seguente descrive i valori di questa proprietà.

Valore	Descrizione
keyframe-name	Specificare il nome del keyframe da associare al selettore.
none	Specificare senza animazione. Questo può essere utilizzato per sovrascrivere o disattivare qualsiasi animazione proveniente dalla catena.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo animation-name del suo elemento padre.

Compatibilità del browser

Compatibilità dei browser per l'attributo animation-name, tutti i browser principali supportano questa proprietà.

	Firefox 5+ ^-moz-, 15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-, 15+ ^-webkit-

Leggi di più

Ecco alcune guide da consultare:Animazione CSS3.

Proprietà e regole correlate:animation,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.

Proprietà animation-play-state CSS3 Proprietà animation-iteration-count CSS3