Lastnost animation-direction

Lastnost animation-direction določa smer animacije. Privzeto se bo animacija ponovila le 1 krat in nato vrnila v začetno stanje, nato, če je nastavljena zamuda animation-delay, bo čakala določen čas in nato se bo cikel začel znova.

Ta lastnost omogoča spreminjanje tega vedenja, na primer tako, da animacija po koncu ostane tam, kjer se je končala, namesto da bi skočila nazaj v začetni položaj.

Prav tako lahko nastavite takšno vedenje: animacija bo dosegla skrajno točko in se vrnila nazaj (kot pri transition). Glejte opis spodaj.

Sintaksa

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

Vrednosti

Privzeta vrednost: normal.

Primer

Zdaj se bo element premikal v eno smer, nato pa nazaj, saj je nastavljena vrednost alternate. Pri tem ima animation-duration vrednost 3 sekunde, kar pomeni, da bosta premikanje "tja" in "nazaj" trajali 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

Zdaj se bo element premikal v obratno smer (namesto od leve proti desni, bo od desne proti levi):

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

Zdaj se bo element premikal tja in nazaj, vendar v obratni smeri (namesto da bi začel levo, bo začel desno):

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

Результат:

Glejte tudi