Toată lumea iubește mișcarea.Adăugând a patra dimensiune, timpul(de fapt în acest caz timpul e treia dimensiune, căci un website este în 99.99% din cazuri bidimensional – asta la momentul scrierii acestui articol), la un website este principalul mod prin care designul de pe ecran se evidențiază de cel fizic scris, printat.Trazițiile CSS sunt o metodă simplă prin care poți anima elementele unei pagini fără a mai utiliza Javascript sau Flash.
Tranzitii CSS3

W3C ne spune că tranzițiile permit de fapt schimbarea proprietăților din CSS într-un mod mai fluid, pe o perioadă de timp determinată.În alte cuvinte, tranzițiile CSS ne permit să modificăm o proprietate gradual, creând iluzia de mișcare astfel adăugând design-ului acea emoție și subtilitate pe care nu o simțim într-un timp foarte scurt.

Suportul browserelor

Toate browserele moderne, chiar și IE suportă tranzițiile CSS.Totuși, e important să știm că browserele care nu suportă această proprietate vor ignora pur și simplu codul CSS „necunoscut”, iar orice tranziție va avea loc instantaneu(nici nu mai poate fi numită tranziție o acțiune ce are loc instantaneu…poate la limită ((-: ).

Dacă vrem să extindem raza de suport a browserelor putem folosi prefixe specifice, astfel proprietate devenind funcțională pentru Firefox 4+, Opera 10.5 și majoritatea versiunilor de Chrome și Safari.Codul, cu tot cu prefixele specifice arată ca mai jos:

div {
  -o-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

Prefixele vor ieși gradual din uz pe măsură ce versiunile anterioare ale browserelor nu vor mai fi folosite.

Parametrii unei tranziții

Există 4 parametrii la o tranziție:

  • proprietatea tranziției: de obicei e cuvântul cheie all – pentru a aplica tranziția la toată proprietatea
  • durata tranziției: cât de jult vrei să dureze tranziția
  • funcția de timing: efectul în sine ce dă impresia de mișcare mai naturală
  • întârzierea tranziției: după cât timp vrei să înceapă tranziția

Proprietăți care pot fi tranziționate

Poți tranziționa orice proprietate ce are ca valoare un număr, care poate fi translatată într-o valoare matematică.De exemplu, poți tranziționa font-size, dar nu poți font-face.

Mai jos e întreaga listă cu proprietățile ce pot fi tranziționate:

background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical-align, width, word-spacing, z-index.

Un exemplu real

Am creat un meniu simplu, cu cîteva elemente peste care treci cu mouse-ul își vor schimba culoarea și un paragraf cu un link.Nu voi complica situația așa că nu e un design atrăgător.

See the Pen Transitions example by Stefanescu Marian (@marianstefi20) on CodePen.

Acum mai trebuie să-mi spui dacă ai reușit să faci ceva nou și mai interesant!

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Send this to a friend