CSS3 transition tutorial

Sa pojavom CSS3 postale su dostupne mnoge zanimljive opcije za stvaranje efekata, jedna od najkorisnijih je transition svojstvo. Transition opcija važan deo CSS-a, može se koristiti za kreiranje dinamičkog efekta na div elementu ili klasi korišćenjem jednostavne strukture;

transition: property duration timing-function delay;

CSS3 transition je odličan način da dodate male animacije bez toga da koristite JavaScript biblioteke kao što je jQuery.

Demo prikaz

Pre nego što krenemo, možete pogledati kako transition efekat funkcioniše na sledećoj stranici.

Svojstvo

Kao prvo, da bi transition efekat radio, standardno svojstvo koje će biti primenjeno mora biti definisano. Dve osobine koje se najčešće definišu su širina i visina. Da bi definisali svojstva jednostavno koristite ovaj oblik:

transition-property: define property;

Promena veličine

Nakon definisanja glavnog svojstva sledeće što treba da se uradi je dodeljivanje početne i krajnje vrednosti. U slučaju vrednosti kao što su širina i visina početna vrednost treba da se definiše na jednu dimenziju, a krajnja treba da bude različita.

Na primeru ispod, postavili smo transition svojstvo na širinu, zatim početnu vrednost širine i na kraju postavljamo vrednost koja će se pojaviti kada pređemo kursorom preko elementa:

[css]
#mainheader {
transition-property:width;
width:50px;
}
#mainheader:hover {
width:75px;
}
[/css]

Dužina trajanja efekta

Sad kada smo definisali svojstvo za transformaciju širine, treba da definišemo trajanje efekta. Ovo se postiže definisanjem dužine trajanja u milisekundama:

transition-duration: duration;

Primer:

[css]
#mainheader {
transition-property:width;
transition-duration:0.5s;
width:500px;
}
#mainheader:hover {
width:750px;
}
[/css]

Ovo znači da će se mainheader div proširiti za 250px za 5 sekundi.

Timing funkcija

Ovaj kod je dovoljan da se stvori lep efekat, ali možemo još unaprediti transition svojstvo pomoću timing funkcije. Koristeći ovu opciju moguće je promeniti krivu prikazivanja za transition-duration svojstvo. Podrazumevano podešavanje za transition svojstvo je linear, međutim možete da definišete i sledeće: ease, ease-in, ease-out, ease-in-out itd.

Dodavanjem ove funkcije kod izgleda ovako:

[css]
#mainheader {
transition-property:width;
transition-timing-function:ease-in-out;
transition-duration:0.5s;
width:500px;
}
#mainheader:hover {
width:750px;
}
[/css]

Delay

Dalje je moguće koristiti transition-delay svojstva za definisanje pauze pre početka efekta:

transition-delay: time;

Zaključak

Na kraju, važno je razmotriti dve stvari kada koristimo CSS3 transition svojstvo. Prvo, većina browsera zahteva korišćenje prefiksa da bi se efekat koristio (izuzetak je IE10, Opera i Firefox16+).

-moz-transition: za Firefox 15
-webkit-transition: Chrome i Safari

(imajte na umu da IE9 i starije verzije uopšte ne podržavaju ovo svojstvo).

Drugo, iako smo koristili dugačke načine za definisanje, treba razmotriti i skraćenu verziju za definisanje ovoga svojstva kao na primeru:

[css]
#mainheader {
-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */
-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */
transition: width ease-in-out 0.5s 0.1s;
width:500px;
}
#mainheader:hover {
width:750px;
}
[/css]

Ako Vam se svideo ovaj članak možete pogledati još jedan zanimljiv primer efekata u css3, radi se o polaroid efektu.

Jovan Ivezic

E-business and internet marketing specialist.