Animații CSS. Rulare animație în direcție inversă sau cicluri alternative. Proprietatea animation-direction. Valori: normal, reverse, altenate, alternate-reverse.

Rulați animația în direcție inversă sau cicluri alternative

Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.

Proprietatea animation-direction poate avea următoarele valori:
 

• normal - Animația este redată normal (înainte)(forwards). Aceasta este implicită
• reverse - animația este redată în sens invers (înapoi)(backwards)
• alternate - animația este redată mai întâi înainte(forwards), apoi înapoi(backwards)
• alternate-reverse - animația este redată mai întâi înapoi(backwards), apoi înainte(forwards)

Următorul exemplu va rula animația în sens invers (înapoi)(backwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Următorul exemplu utilizează valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Următorul exemplu folosește valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte(forwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}