Proprietà animation-direction

La proprietà animation-direction imposta la direzione dell'animazione. Per impostazione predefinita, l'animazione si ripeterà solo 1 volta e poi tornerà allo stato iniziale, quindi, se è impostato un ritardo animation-delay, aspetterà il tempo specificato e poi il ciclo ricomincerà da capo.

Questa proprietà permette di modificare questo comportamento, ad esempio, in modo che l'animazione, una volta terminata, rimanga nel punto in cui è finita, e non salti bruscamente alla posizione iniziale.

È anche possibile impostare un comportamento tale per cui l'animazione raggiunga il punto estremo e ritorni indietro (come in transition). Vedi la descrizione qui sotto.

Sintassi

cssselettore {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Valori

Valore predefinito: normal.

Esempio

Ora l'elemento si muoverà in una direzione, e poi tornerà indietro, poiché è impostato il valore alternate. Inoltre animation-duration ha un valore di 3 secondi e questo significa che gli spostamenti "andata" e "ritorno" dureranno 3 secondi ciascuno:

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

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

#elem {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Esempio

Ora l'elemento si muoverà nella direzione opposta (dovrebbe andare da sinistra a destra, ma andrà da destra a sinistra):

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

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Esempio

Ora l'elemento si muoverà avanti e indietro, ma in direzione inversa (dovrebbe iniziare da sinistra, ma inizierà da destra):

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

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

#elem {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Vedi anche