Proprietà CSS animation-name
Usa la proprietà animation-name per specificare i nomi delle animazioni definite dalle regole @keyframes. Prova l'esempio della proprietà animation-name.
La proprietà animation-name assegna una o più animazioni @keyframes a un elemento. Il valore è l'identificatore che hai assegnato a una regola @keyframes — il nome è ciò che collega l'elemento alla sua animazione. Senza animation-name, il browser non ha keyframes da eseguire, quindi nulla si anima anche se hai impostato una durata.
Questa proprietà si limita a puntare all'animazione; non la avvia da sola. È comunque necessaria una animation-duration non zero affinché i keyframes vengano riprodotti. animation-name è una delle proprietà CSS3.
In pratica raramente si scrive animation-name a mano — la shorthand animation imposta il nome, la durata, la funzione di temporizzazione, il ritardo, il numero di iterazioni, la direzione e altro in un'unica dichiarazione. Usa la forma estesa quando vuoi sovrascrivere solo il nome (ad esempio, sostituire i keyframes al passaggio del mouse mantenendo la stessa temporizzazione).
Quando usarla
- Riutilizzare un insieme di keyframes su più elementi con durate o ritardi diversi, impostando
animation-nameuna volta e variando le altre proprietà estese. - Cambiare animazione in base allo stato — assegna a un elemento un nome normalmente e un nome diverso su
:hovero con il cambio di una classe. - Eseguire più animazioni contemporaneamente sullo stesso elemento elencando nomi separati da virgola (vedi Animazioni multiple di seguito).
Regole di denominazione
Il nome di un keyframes è un identificatore CSS, quindi si applicano le stesse regole:
- È case-sensitive:
Slideeslidesono nomi diversi. - Può contenere lettere, cifre, trattini e underscore, ma non può iniziare con una cifra.
- Evita le parole chiave CSS globali
none,initial,inheriteunsetcome nomi di animazioni —animation-name: noneviene interpretato come "nessuna animazione", non come un blocco keyframes letteralmente chiamatonone.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationName = "element"; |
Sintassi
Sintassi della proprietà CSS animation-name
animation-name: keyframename | none | initial | inherit;Puoi fornire più di un nome, separati da virgole, per applicare più animazioni allo stesso elemento:
animation-name: slide, fade;Esempio della proprietà animation-name
Esempio della proprietà CSS animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation-name: element;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>Nell'esempio fornito, il nome dell'animazione è impostato su "element". Puoi scegliere qualsiasi nome, purché esista una regola @keyframes element corrispondente. Se il nome non corrisponde ad alcuna regola @keyframes, la dichiarazione viene semplicemente ignorata e nulla si anima.
Animazioni multiple
Quando elenchi più nomi, ciascuno si associa per posizione ai valori delle altre proprietà estese dell'animazione. Qui slide ottiene 2s/ease-out e fade ottiene 4s/linear:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
padding: 20px;
background: #1c87c9;
color: #fff;
animation-name: slide, fade;
animation-duration: 2s, 4s;
animation-timing-function: ease-out, linear;
animation-iteration-count: infinite;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(150px); }
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0.2; }
}
</style>
</head>
<body>
<div>Sliding and fading at the same time.</div>
</body>
</html>Se fornisci meno valori per un'altra proprietà rispetto al numero di nomi, i valori si ripetono per coprire ogni nome. Per un controllo più preciso sul resto dell'animazione, vedi animation-delay e animation-direction.
Valori
| Valore | Descrizione |
|---|---|
| none | Questo è il valore predefinito. Specifica che non ci sarà alcuna animazione. |
| keyframename | Specifica il nome dell'animazione. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |