A List Apart nelegerea Tranziiilor CSS

de Dan Cederholm

Istoric
Efectul de tranziie a fost implementat iniial de echipa WebKit pentru Safari. n momentul actual este preconizat transformarea acestuia ntr-un standard W3C.

Ce Sunt Tranziiile CSS

Metafor pentru tranziiile CSS: sunt asemenea untului. Conform W3C, ele permit schimbri ale proprietilor CSS care se produc lin, gradual, ntr-o perioad determinat. Tranziiile sunt declanate de strile de hover, clic, focusare sau orice alt schimbare a proprietii CSS.

Un Exemplu Simplu
Este folosit o tranziie pentru schimbarea culorii de fundal a unei legturi, pentru a permite schimbarea uoar dintr-un verde pal ntr-unul nchis. Marcajul legturii: <a href=# class=tranziie>Transition me!</a> Va fi adugat o declaraie pentru starea normal a legturii ( verde pal ) i starea de hover: a.tranziie { padding: 5px 10px; background: #9c3; } a.tranziie: hover { background: #690; }

Vor fi adugate proprietile de tranziie cu prefixul -webkit ( Safari i Chrome ): a.tranziie { padding: 5px 10px; background: #9c3; -webkit-transition-property: background; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } a.tranziie: hover { background: #690; } Se remarc cele trei pri ale tranziiei: transition-property: Proprietatea asupra creia este aplicat tranziia. transition-duration: Ct de mult ar trebui s dureze. transition-timing-function: Ct de repede are loc tranziia n intervalul de timp.

Funciile De Sincronizare
Exist 6 funcii: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier. Funcia ease ( folosit implicit ) i linear sunt potrivite pentru tranziiile scurte. Declaraia de mai sus poate fi simplificat prin folosirea proprietii transition : a.tranziie { padding: 5px 10px; background: #9c3; -webkit-transition: background 0.3s ease; } a.tranziie: hover { background: #690; }

Implementarea Tranziiilor n Restul Navigatoarelor

n declaraia revizuit, for fi utilizate prefixele proprietare -webkit, -moz, -o. Proprietatea CSS3 transition va fi ultima din stiv: a.tranziie { padding: 5px 10px; background: #9c3; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } a.tranziie: hover { background: #690; }

Strile De Tranziie
Avnd n vedere c declanatorul tranziiei din exemplu este starea :hover, este firesc s ne ntrebm dac proprietile de tranziie nu ar trebuie plasate n declaraia :hover. Totui, din cauza faptului c un element poate avea i alte stri, ne vom dori ca tranziia s fie aplicat i asupra acestora fr a reutiliza codul. S ne imaginm c dorim ca efectul de tranziie s fie aplicat i asupra pseudoclaselor :focus i :active. n loc s adugm stiva de proprieti transition la fiecare din aceste stri, o vom declara o singur dat, n starea normal a legturii. Urmtorul exemplu adaug acelai efect de tranziie al culorii de fundal pentru starea :focus ( atunci cnd legtura este focalizat prin tastatur ): a.tranziie { padding: 5px 10px; background: #9c3; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } a.tranziie: hover a.tranziie: focus { background: #690; }

Strile De Tranziie Pentru Proprieti Multiple

Putem folosi mai multe tranziii simultan, pentru mai multe proprieti, cu condiia ca acestea s fie delimitate de virgul. n blocul declaraiilor folosite pentru a.tranziie va fi adugat un efect de tranziie pentru culoarea legturii: a.tranziie { padding: 5px 10px; background: #9c3; -webkit-transition: background 0.3s ease, color 0.2s linear; -moz-transition: background 0.3s ease, color 0.2s linear; -o-transition: background 0.3s ease, color 0.2s linear; transition: background 0.3s ease, color 0.2s linear; } a.tranziie: hover a.tranziie: focus { color: #030; background: #690; }

Aplicarea Strilor De Tranziie Pentru Toate Proprietile

Pentru aplicarea tranziiilor asupra tuturor proprietilor vom folosi cuvntul cheie all: a.tranziie { padding: 5px 10px; background: #9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a.tranziie: hover { background: #690; } Aceast metod poate fi mai util dect enumerarea efectelor de tranziie pentru proprietile color i background.