Savybė animation-direction

Savybė animation-direction nustato animacijos kryptį. Pagal nutylėjimą animacija kartojasi tik 1 kartą ir tada grįžta į pradinę būseną, tada, jei nustatytas delsos laikas animation-delay, lauks nustatytą laiką ir tada ciklas prasidės iš naujo.

Ši savybė leidžia pakeisti šį elgesį, pavyzdžiui, taip, kad animacija po pabaigos liktų toje vietoje, kur ji baigėsi, o ne šoktų atgal į pradinę padėtį.

Taip pat galima nustatyti tokį elgesį: animacija nuėjus iki kraštutinio taško grįš atgal (kaip ir transition). Žiūrėkite aprašymą žemiau.

Sintaksė

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

Reikšmės

Numatytoji reikšmė: normal.

Pavyzdys

Dabar elementas judės viena kryptimi, o paskiau grįš atgal, nes nustatyta reikšmė alternate. Tuo tarpu animation-duration turi reikšmę 3 sekundės ir tai reiškia, kad judėjimas "ten" ir "atgal" truks po 3 sekundes:

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

Результат:

Pavyzdys

Dabar elementas judės atvirkštine kryptimi (turėtų iš kairės į dešinę, o judės iš dešinės į kairę):

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

Результат:

Pavyzdys

Dabar elementas judės pirmyn-atgal, bet atvirkštine kryptimi (turėtų pradėti kairėje, o pradės dešinėje):

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

Результат:

Taip pat žiūrėkite