animation-direction հատկությունը

animation-direction հատկությունը սահմանում է անիմացիայի ուղղությունը: Լռելյայն անիմացիան կկրկնվի միայն 1 անգամ և ապա կվերադառնա սկզբնական վիճակին, ապա, եթե սահմանված է animation-delay հատկությունը, կսպասի նշված ժամանակը և ապա ցիկլը կսկսի նորից:

Այս հատկությունը թույլ է տալիս փոխել այս վարքագիծը, օրինակ, այնպես, որ անիմացիան ավարտից հետո մնա այնտեղ, որտեղ այն ավարտվեց, և չցատկի սկզբնական դիրք:

Կարելի է նաև սահմանել հետևյալ վարքագիծը. անիմացիան կհասնի ծայրահեղ կետին և կվերադառնա հետ (ինչպես transition-ում): Տես նկարագրությունը ստորև:

Շարահյուսություն

cssընտրիչ {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Արժեքներ

Լռելյայն արժեքը՝ normal:

Օրինակ

Այժմ տարրը կշարժվի մի ուղղությամբ, ապա կվերադառնա հետ, քանի որ սահմանված է alternate արժեքը: Ընդ որում animation-duration հատկության արժեքը 3 վայրկյան է, ինչը նշանակում է, որ «այնտեղ» և «հետ» շարժումները կտևեն 3 վայրկյան:

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

Результат:

Օրինակ

Այժմ տարրը կշարժվի հակառակ ուղղությամբ (պետք է ձախից աջ, բայց կլինի աջից ձախ):

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

Результат:

Օրինակ

Այժմ տարրը կշարժվի այնտեղ-այստեղ, բայց հակառակ ուղղությամբ (պետք է սկսեր ձախից, բայց կսկսի աջից):

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

Результат:

Տես նաև