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:

css tranzicija

  1. 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”

  2. transition-duration (obavezno)

    Definiše trajanje tranzicije

  3. 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/
  4. transition-delay (opciono)

    Definiše vreme nakon kojeg će početi tranzicija od trenutka aktiviranja tranzicije

Primer

Skraćena sintaksa “transiton”

Medjutim najčešće se koristi svojstvo pod nazivom samo “transition” koje je obuhvata sva četri prethodno pomenuta svojstva:

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.

Podelite:

One Response to “Animacija sa CSS svojstvom “transition””

Ostavite komentar