Proprietà CSS animation-name
Usa la proprietà animation-name per specificare uno o più nomi di animazioni definite dalle regole @keyframes. Prova l'esempio della proprietà animation-name.
La proprietà animation-name specifica uno o più nomi di animazioni definite dalla regola @keyframes che devono essere applicate all'elemento selezionato. Quando per una qualsiasi proprietà di animazione vengono specificati più valori separati da virgola, questi verranno associati in modo diverso alle animazioni definite in animation-name.
La proprietà animation-name è una delle proprietà CSS3.
La proprietà shorthand animation può essere usata per impostare tutte le proprietà dell'animazione in una volta sola. Diverse proprietà di animazione possono controllare l'animazione. Possono specificare il tempo di iterazione dell'animazione, se l'animazione deve essere in riproduzione o in pausa e se alterna tra i valori. È inoltre possibile ritardare il tempo di avvio dell'animazione.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationName = "element"; |
Sintassi
Sintassi della proprietà CSS animation-name
animation-name: keyframename | none | initial | inherit;Esempio della proprietà animation-name:
Esempio della proprietà CSS animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s 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 desideri.
Valori
| Valore | Descrizione |
|---|---|
| none | È il valore predefinito. Specifica che non ci sarà alcuna animazione |
| keyframename | Specifica il nome dell'animazione. |
| initial | Fa usare alla proprietà il suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |