Xüsusiyyət animation-direction

Xüsusiyyət animation-direction animasiyanın istiqamətini təyin edir. Standart olaraq animasiya yenidən ancaq 1 dəfə təkrarlanır və sonra ilkin vəziyyətinə qayıdır, sonra, əgər gecikmə təyin edilibsə animation-delay, müəyyən edilmiş vaxtı gözləyir və sonra dövr yenidən başlayır.

Bu xüsusiyyət bu davranışı dəyişməyə imkan verir, məsələn, elə ki, animasiya bitdikdən sonra bitdiyi yerdə qalsın, ilkin vəziyyətinə tullanmasın.

Həmçinin belə bir davranış təyin etmək olar: animasiya son nöqtəyə çatır və geri qayıdır (transition-da olduğu kimi). Aşağıdakı təsvirə baxın.

Sintaksis

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

Dəyərlər

Standart dəyər: normal.

Nümunə

İndi element bir istiqamətdə hərəkət edəcək, sonra isə geri qayıdacaq, çünki alternate dəyəri təyin edilib. Bununla animation-duration 3 saniyə dəyərinə malikdir və bu o deməkdir ki, "ora" və "geri" hərəkətləri 3 saniyə davam edəcək:

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

Результат:

Nümunə

İndi element əks istiqamətdə hərəkət edəcək (soldan sağa yox, sağdan sola):

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

Результат:

Nümunə

İndi element irəli-geri hərəkət edəcək, lakin əks istiqamətdə (soldan başlamalı idi, sağdan başlayacaq):

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

Результат:

Həmçinin bax