Proprietatea animation-direction

Proprietatea animation-direction stabilește direcția animației. În mod implicit, animația se repetă doar 1 dată și apoi revine la starea inițială, apoi, dacă este setată o întârziere animation-delay, va aștepta timpul stabilit și apoi ciclul va începe de la început.

Această proprietate permite modificarea acestui comportament, de exemplu, astfel încât animația după finalizare să rămână în locul în care s-a terminat, și să nu sară înapoi în poziția inițială.

De asemenea, poți seta un astfel de comportament: animația va ajunge la punctul extrem și se va întoarce înapoi (ca în transition). Consultați descrierea de mai jos.

Sintaxă

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

Valori

Valoarea implicită: normal.

Exemplu

Acum elementul se va mișca într-o direcție, apoi se va întoarce înapoi, deoarece este setată valoarea alternate. În acest caz, animation-duration are valoarea de 3 secunde și asta înseamnă că mișcările "dus" și "întors" vor dura câte 3 secunde:

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;
}

Результат:

Exemplu

Acum elementul se va mișca în direcția inversă (ar trebui de la stânga la dreapta, dar se va mișca de la dreapta la stânga):

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;
}

Результат:

Exemplu

Acum elementul se va mișca înainte și înapoi, dar în direcție inversă (ar trebui să înceapă de la stânga, dar va începe de la dreapta):

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;
}

Результат:

Vezi și