Proprietà animation-name
La proprietà animation-name specifica il nome
dell'animazione (o delle animazioni) che verrà applicata
a questo elemento. Il nome dell'animazione deve essere
lo stesso di quello definito nella creazione dei fotogrammi
chiave @keyframes.
Sintassi
selettore {
animation-name: nome animazione;
}
Esempio
In questo esempio l'animazione ha il nome move:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Vedi anche
-
la proprietà
animation-duration,
che specifica la durata dell'animazione -
la proprietà
animation-delay,
che specifica il ritardo prima dell'esecuzione dell'animazione -
la proprietà
animation-timing-function,
che specifica la velocità di esecuzione dell'animazione -
la proprietà
animation-iteration-count,
che specifica il numero di iterazioni dell'animazione -
la proprietà
animation-direction,
che specifica la direzione dell'animazione -
la proprietà
animation-fill-mode,
che specifica lo stato dell'animazione -
la proprietà
animation-play-state,
che permette di mettere in pausa l'animazione -
la proprietà
animation,
che rappresenta una forma abbreviata per le animazioni -
il comando
@keyframes,
che definisce i fotogrammi chiave dell'animazione -
le transizioni fluide
transition, che rappresentano un'animazione al passaggio del mouse sull'elemento