Proprietà animation

La proprietà animation è una proprietà scorciatoia per le animazioni, permette di impostare tutte le proprietà per l'animazione simultaneamente: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

L'ordine dei valori non è importante, il tempo di esecuzione dell'animazione animation-duration deve obbligatoriamente essere posizionato prima del ritardo animation-delay. Le uniche proprietà obbligatorie sono animation-name e animation-duration.

La proprietà può anche accettare il valore none, che disabilita completamente l'animazione. Questo valore è il valore predefinito.

Sintassi

cssselettore {
  animation: valori;
}

Esempio

In questo esempio ci sarà un ritardo prima dell'animazione di 3 secondi (prima di ogni nuova riproduzione), e poi l'animazione verrà riprodotta per 6 secondi:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Esempio . Possibili problemi

Un'animazione, scritta in forma abbreviata, potrebbe non funzionare a causa del suo nome. Consideriamo la seguente animazione:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Nota, sto usando il nome dell'animazione reverse. A prima vista, tutto bene, ma l'animazione non funziona, poiché reverse è una parola chiave valida per la proprietà animation-direction.

Inoltre, l'animazione non funzionerà se si utilizzano in forma abbreviata altre parole chiave nel nome. Ma tutto funziona bene quando si utilizza la forma "completa" di descrizione.

Tra le parole chiave-valori di animation-direction che interrompono le animazioni, ci sono anche le parole chiave relative alle funzioni di easing, e anche infinite, alternate, running, paused e così via.

Vedi anche