Kurs HTML

Do czego służy animation-direction?

Właściwość animation-direction określa, **czy animacja w kolejnych cyklach powtórzeń ma być odtwarzana normalnie (od początku do końca), wstecz (od końca do początku), czy naprzemiennie**.

Jest to szczególnie istotne, gdy animacja jest powtarzana (animation-iteration-count > 1 lub infinite), ponieważ decyduje o zachowaniu animacji między cyklami.

Składnia i wartości

Właściwość animation-direction przyjmuje jedną lub więcej wartości, oddzielonych przecinkami, odpowiadających kolejnym animacjom zdefiniowanym w animation-name.

animation-direction: normal | reverse | alternate | alternate-reverse [, ...];Kopiuj

• normal (wartość domyślna): Animacja jest odtwarzana normalnie w każdym cyklu (od 0% do 100%). Po zakończeniu cyklu, jeśli ma być powtórzony, animacja "przeskakuje" z powrotem do stanu początkowego (0%) i zaczyna od nowa.
• reverse: Animacja jest odtwarzana wstecz w każdym cyklu (od 100% do 0%). Po zakończeniu cyklu, jeśli ma być powtórzony, animacja "przeskakuje" z powrotem do stanu końcowego (100%) i zaczyna od nowa wstecz.
• alternate: Animacja jest odtwarzana normalnie (0% do 100%) w cyklach nieparzystych (1, 3, 5...), a wstecz (100% do 0%) w cyklach parzystych (2, 4, 6...). Zapewnia to płynne przejście między końcem jednego cyklu a początkiem następnego.
• alternate-reverse: Animacja jest odtwarzana wstecz (100% do 0%) w cyklach nieparzystych (1, 3, 5...), a normalnie (0% do 100%) w cyklach parzystych (2, 4, 6...).

Wartość domyślna: normal.

Przykład:

@keyframes ruchPilki {
  from { left: 0; }
  to { left: 200px; }
}

.pilka {
  position: relative;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  animation-name: ruchPilki;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.pilka1 { /* Normal - przeskakuje z powrotem */
  animation-direction: normal;
}

.pilka2 { /* Reverse - zawsze od prawej do lewej, przeskakuje */
  animation-direction: reverse;
}

.pilka3 { /* Alternate - płynnie w obie strony */
  animation-direction: alternate;
}

.pilka4 { /* Alternate-reverse - płynnie, zaczynając od prawej */
  animation-direction: alternate-reverse;
}
Kopiuj

W powyższym przykładzie piłka .pilka3 będzie poruszać się najbardziej naturalnie w przód i w tył dzięki alternate.

Jeśli lista kierunków jest krótsza niż lista nazw animacji, wartości są powtarzane.

Kiedy używać poszczególnych wartości?

• normal: Domyślne zachowanie, odpowiednie dla animacji, które mają się resetować po każdym cyklu (np. efekt pojawiania się).
• reverse: Rzadziej używane samodzielnie, ale może być przydatne do odtworzenia animacji wstecz bez modyfikowania @keyframes.
• alternate: Bardzo użyteczne do tworzenia płynnych, zapętlonych animacji typu "tam i z powrotem" (np. ruch wahadłowy, pulsowanie rozmiaru, zmiana koloru w obie strony).
• alternate-reverse: Podobne do alternate, ale zaczyna od odtworzenia animacji wstecz.