Introducere în Web Development

Tranzițiile ne permit să trecem de la o stare la alta a unui element. Această trecere se poate face prin activarea sau dezactivarea unor pseudo-clase, dar și alte schimbări, probabil făcute cu ajutorul JavaScript.

În cod, putem configura tranzițiile folosind familia de proprietăți transition.

Proprietăți de tranziție

transition-property

Proprietatea transition-property ne permite să specificăm ce proprietăți vor primi tranziții. Ca valoare dăm lista de proprietăți ce vrem să fie animate, separate prin virgulă.

Nu toate proprietățile pot fi animate, ci doar cele care au o valoare numerică (inclusiv culorile).

Se mai poate da valoarea all care va face toate proprietățile animate. Dacă sunt foarte multe proprietăți care se schimbă, s-ar putea să consume multe resurse, așa că nu este recomandat să pui tranziție pe toate proprietățile.

Valoarea none va dezactiva tranzițiile.

Proprietățile care nu modifică flowul documentului, precum transform, outline, box-shadow, și altele, vor fi mai performante.

transition-duration

Durata tranziției se poate da în secunde (s) sau milisecunde (ms).

În caz că ai chiulit la orele de fizică, 1s = 1000ms

Browserul va tranziționa o valoare de la cea inițială la cea finală în intervalul dat aici.

                    transition-property: width;
transition-duration: 2s;
                

Setând valoarea la 0s sau 0ms, se dezactivează tranzițiile.

transition-timing-function

Această proprietate ne lasă să configurăm cum sunt calculați pașii intermediari. Se poate mări sau micșora viteza la începutul sau sfârșitul tranziției.

Mai sunt și alte funcții, pe care sincer nu le înțeleg suficient de bine să le explic.

transition-delay

Cu transition-delay definim în secunde sau milisecunde cât să aștepte înainte să înceapă tranziția. Dacă nu am definit ceva, tranziția începe imediat.`