Animații CSS. Rulare animație în direcție inversă sau cicluri alternative. Proprietatea animation-direction. Valori: normal, reverse, altenate, alternate-reverse.
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
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;
}