Svojstva
CSS Transitions (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu vrednosti izabranog CSS svojstva u određenom vremenskom periodu, tako što postepeno menja vrednosti CSS svojstva. Ovaj mehanizam pokrivaju četri svojstva:
-
transition-property (obavezno)
Definiše na kome CSS svojstvu će biti izvršena tranzicija. Spisak svih svojstava na kojima može da se izvrši tranzicija možete pogledati na “www.w3.org”
-
transition-duration (obavezno)
Definiše trajanje tranzicije
-
transition-timing-function (opciono)
Definiše funkciju koja će biti zadužena za brzinu tranzicije u vremenu.
- linear – predefinisana tranzicija sa konstntnom brzinom
- ease – predefinisana tranzicija koja ubrzava kroz sredinu pa usporava na kraju
- ease-in – predefinisana tranzicija koja počinje sporo pa zatim ubrzava sve do kraja
- ease-out – predefinisana tranzicija koja počinje velikom brzinom a zatim usporava do kraja
- ease-in-out – predefinisana tranzicija koja počinje sporo, nakon čega ubrzava u sredini a zatim usporava do kraja
- cubic-bezier(x1,y1,x2,y2) – programer sam definiše ponašanje funkcije. Pomoć za definisanje “cubic-bezier()” funkcije možete potražiti na sajtu cubic-bezier.com ili easings.net/
-
transition-delay (opciono)
Definiše vreme nakon kojeg će početi tranzicija od trenutka aktiviranja tranzicije
Primer
|
1 2 3 4 5 6 |
.selector { transition-property: cssSvojstvoKojeSeMenja; transition-duration: trajanjeAnimacije; transition-timing-function: timing-function; transition-delay: velicinaOdlaganjaAnimacije; } |
Skraćena sintaksa “transiton”
Medjutim najčešće se koristi svojstvo pod nazivom samo “transition” koje je obuhvata sva četri prethodno pomenuta svojstva:
|
1 2 3 |
.selector { transition: [property] [duration] [timing-function] [delay]; } |
Pokretanje tranzicije
“Okidanje” dogadjaja koji aktivira promenu svojstva, a samim tim i tranziciju ako je definisana u svojstvu može biti izvršeno:
- pseudo klasama
- :hover – kada mišem predjemo preko elementa
- :focus – kada je element u fokusu
- :active – kada je link element aktivan tj. kliknut
- menjanjem svojstva ili dodavanje klase koja sadrži promenu svojstva sa JavaScriptom
Primeri
Primer – osnovna tranzicija
U ovome primeru se nad desnim elementom izvršava tranzicija usled hover-a jer se tada menja vrednost svojstava “width” i “heigh”.
See the Pen QrXoEj by Web programiranje (@chos) on CodePen.
Primer – transition-timing-function
See the Pen KRjBwV by Web programiranje (@chos) on CodePen.
Primer – transition-delay
See the Pen delay transition by Web programiranje (@chos) on CodePen.
Primer
See the Pen Transitional Button by Web programiranje (@chos) on CodePen.
jako korisno fala