Cauta rapid aici ↑

CSS 3 -- TRANZITIE

De existenta pseudo-claselor nu mai trebuie sa amintesc si asta pentru ca sunt convins ca le cunoasteti. Cea mai folosita pseudo-clasa este hover si cu aceasta putem face extrem de multe, insa stilurile ce vrem sa fie aplicate la evenimentul de survolare al mouse-ului pe un element sunt efectuate instant si nu putem sa vedem tranzitia.

Standardul CSS 3 vine cu cateva proprietatii care ne ajuta sa incetinim , intarziem , sa stabilim o durata de aplicare al stilurilor pe elemente la evenimentul hover .

Proprietatea transition

Rolul acestei proprietatii generale este de a incetini, intarzia sau de a stabili o durata de timp in care sa fie aplicate stilurile noastre la un anumit eveniment pe un element. Valorile pentru aceasta proprietate sunt in cifre intregi sau fractii separate de un caracter punct si reflecta numarul de secunde sau milisecunde in care vrem sa fie facuta tranzitia urmat imediat de litera "s" (lb.engl. seconds). La aceasta proprietate generala putem folosi si anumite cuvinte ce nu au nevoie de traducere.

  • all
  • easy
  • easy-in
  • easy-out
  • easy-in-out
  • linear
  • none
  • cubic-bezier(x1,y1,x2,y2)

Proprietatea transition-delay

Singurul rol al acestei proprietatii este sa intarzie aplicarea stilurilor noastre la un anumit eveniment cu o anumita unitate de timp exprimata in secunde sau milisecunde .

Proprietatea transition-duration

Aceasta proprietate stabileste doar durata in secunde sau milisecunde pana se vor aplica stilurile noastre pe un element la un anumit eveniment.