Свойство 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;
}

Результат:

Вижте също