Svojstvo animation-direction

Svojstvo animation-direction zadaje smer animacije. Podrazumevano, animacija će se ponoviti samo 1 put i zatim će se vratiti u početno stanje, nakon čega, ako je zadato kašnjenje animation-delay, će čekati zadato vreme i onda će ciklus početi iznova.

Ovo svojstvo omogućava promenu ovog ponašanja, na primer, tako da animacija nakon završetka ostane na mestu gde se završila, a da ne skoči natrag u početni položaj.

Takođe možete zadati sledeće ponašanje: animacija će stići do krajnje tačke i vratiti se nazad (kao kod transition). Pogledajte opis ispod.

Sintaksa

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

Vrednosti

Podrazumevana vrednost: normal.

Primer

Sada će se element kretati u jednom smeru, a zatim će se vraćati nazad, pošto je zadato vrednost alternate. Pritom, animation-duration ima vrednost 3 sekunde i to znači da će pomeranja "tamo" i "nazad" trajati po 3 sekunde:

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

Результат:

Primer

Sada će se element kretati u obrnutom smeru (trebalo bi sleva nadesno, a sada će sdesna nalevo):

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

Результат:

Primer

Sada će se element kretati tamo-ovamo, ali u obrnutom smeru (trebalo bi da počne sleva, a sada će početi sdesna):

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

Результат:

Pogledajte takođe