Vlastnosť animation-direction

Vlastnosť animation-direction nastavuje smer animácie. Štandardne sa animácia zopakuje iba 1 krát a potom sa vráti do pôvodného stavu, následne, ak je nastavené oneskorenie animation-delay, bude čakať stanovený čas a potom cyklus začne odznova.

Táto vlastnosť umožňuje zmeniť toto správanie, napríklad tak, aby animácia po skončení zostala v mieste, kde skončila, a nepreskočila späť do počiatočnej pozície.

Tiež je možné nastaviť také správanie: animácia dôjde do krajného bodu a vráti sa späť (ako pri transition). Pozrite si popis nižšie.

Syntax

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

Hodnoty

Štandardná hodnota: normal.

Príklad

Teraz sa bude prvok pohybovať jedným smerom, a potom sa vráti späť, pretože je zadaná hodnota alternate. Pritom animation-duration má hodnotu 3 sekundy a to znamená, že presuny "tam" a "späť" budú trvať 3 sekundy:

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

Результат:

Príklad

Teraz sa bude prvok pohybovať opačným smerom (mal by zľava doprava, ale bude sprava doľava):

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

Результат:

Príklad

Teraz sa bude prvok pohybovať tam a späť, ale v opačnom smere (mal by začínať vľavo, ale bude začínať vpravo):

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

Результат:

Pozrite tiež