Animații CSS. Rularea animației în direcție inversă sau cicluri alternative. Proprietatea animation-direction. Valorile: normal, reverse, alternate, 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, 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;
}