Svojstva

Pojedinačna svojstva:

css animacija

Animacija se zasniva na korišćenju sledećih svojstava:

  1. animation-name (obavezno)

    Ovo svojstvo definiše ime @keyframes pravila po kome će se izvoditi animacija.

    @keyframes:

    CSS svojstvo @keyframes kontroliše medju-korake u animacijskoj sekvenci definisanjem stilova u toku trajanja animacije. Koristeći @keyframes možemo da definišemo tajming za primenu odredjenih CSS svojstava tokom sekvence animacije, 0% označava prvi trenutak animacije, dok 100% pokazuje krajnje stanje animacije.

  2. animation-duration (obavezno)

    Trajanje jednog ciklusa animimacije. Inicjalna vrednost svojstva je 0s

  3. animation-timing-function (opciono)

    Definisanje funkcije koja odredjuje brzinu izvršavanja u toku vremena. Inicjalna vrednost svojstva je ease

    • 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. animation-delay (opciono)

    Definiše vreme nakon kojeg će početi tranzicija od trenutka aktiviranja tranzicije. Inicjalna vrednost svojstva je 0s

  5. animation-direction (opciono)

    Definiše smer izvršavanja animacije u odnosu na zadate podatke. Nakon svokog ciklusa se resetuje i ponavlja. Inicjalna vrednost svojstva je normal.

    • “normal” od definisanog početka pa do kraja
    • “reverse” od definisanog kraja ka početku
    • “alternate” prvo normalno do kraja pa onda reverse do početka
    • “alternate-reverse” prvo unazad do početka pa zatim unapred do kraja
  6. animation-iteration-count (opciono)

    Broj ciklusa animacija. Inicjalna vrednost svojstva je 1. Pored odredjenog broja može biti i “infinite”

  7. animation-fill-mode (opciono)

    sets which values are applied before/after the animation. Inicjalna vrednost svojstva je none

    • none element je podešen na njegovo podrazumevano mesto pre početka animacije i vraća se u to podrazumevano mesto nakon što se animacija završi.
    • forwards element ostaje na mestu definasanom za kraj animacije.
    • backwards mesto elementa će se već primenjivati pre nego što se animacija zapravo pokrene.
    • both animacija će prihvati i forwards i backwards
Primer

See the Pen erqObZ by Web programiranje (@chos) on CodePen.

Skraćena sintaksa

Prethodno pomenuta svojstva se najčešće se koriste u okviru jednog zajedničkog svojstva pod nazivom “animation”.

See the Pen Animation skraćena sintaksa by Web programiranje (@chos) on CodePen.

Višestruke animacije

Na jednom elementu možemo da definišemo više različitih animacija, dovoljno je da ih razdvojim zarezom.

Primer

See the Pen Visestruke animacije by Web programiranje (@chos) on CodePen.

Tips and Tricks

Ponovno pokretanje animacije

CSS svojstvo “animation” ne nudi način za ponovno pokretanje završene animacije, stoga je potrebno aktivirati JavaScript 🙂
Jedini način ponovnog reprodukovanja animacije je uklanjanje efekta animacije (nakon čega će dokument preračunati stil elementa), a zatim ponovno dodavanje efekata animacije na element.

Primer

See the Pen Ponovno pokretanje animacije by Web programiranje (@chos) on CodePen.

Ponovno pokretanje animacije se zasniva na sledećem postupku:

  1. Potrebno je prvo resetovati animaciju, što ima efekat uklanjanja svih klasa koja se trenutno primjenjuju na elementu, uključujući one koje se bave animacijom. Međutim, promene u “class list” se ne primenjuju sve dok se ne izvšri re-kalkulacija stilova.
  2. Za re-kalkulaciju stilova, koristimo metodu window.requestAnimationFrame(), kojoj definišemo callback funkciju. Callback funkcja se izvršava neposredno pre sledećeg “iscrtavanja” dokumenta.

    Medjutim problem je što se pre “iscrtavanje dokumenta re-kalkulacija stilova nije ni dogodila!
  3. Stoga je potrebno da callback funkcija ponovo poziva metodu requestAnimationFrame(), jer će se u ovom slučaju callback funkcija pokrenuti pre ponovnog iscrtavanja a posle re-kalkulacije stilova.

    Dodavanje nove klase elementu kroz callback funkciju će da pokrene ponovno iscrtavanje i samim tim pokrene animaciju.

Zaustavljanje animacije na kraju sekvence

Uklanjanje svojstva “animation-name” bi naglo prekinulo animaciju, medjutim ukoliko želimo da zaustavimo animaciju tek nakon što se cela sekcenaca animacije izvrši, potrebno je koristiti JavaScript. Sa JavaScript-om ćemo ukinuti animaciju ako definišemo animation-name: none; ali tek kada se “okine” događaj “animationiteration”. Ovaj dogadjaj se okida kada se završi iteracija animacije. Treba naglasiti da se dogadjaj ne “okida” ako animacija ima definisano svojstvo “animation-iteration-count” na vrednost jedan tj. animation-iteration-count:1;

NAPOMENA:
Pri korišćenju pomenutog mehanizma nije dozvoljeno korišćenje svojstva animation-direction: alternate

Primer

See the Pen Prekid animacije by Web programiranje (@chos) on CodePen.

Podelite:

Ostavite komentar