Animacija sa CSS svojstvom “animation”

Svojstva

Pojedinačna svojstva:

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.

   @keyframes nazivPravila { 0% { font-size: 10px; } 30% { font-size: 15px; } 100% { font-size: 12px; } }

   1 2 3 4 5 6 7 8 9 10 11

   @keyframes nazivPravila {   0% {     font-size: 10px;   }   30% {     font-size: 15px;   }   100% {     font-size: 12px;   } }

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.
   
   window.requestAnimationFrame(callbackFunkcija(){ });

   1 2 3

   window.requestAnimationFrame(callbackFunkcija(){   });

   
   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.
   
   window.requestAnimationFrame(function(time) { window.requestAnimationFrame(function(time) { document.querySelector(".box").className = "box changing"; }); });

   1 2 3 4 5

   window.requestAnimationFrame(function(time) {     window.requestAnimationFrame(function(time) {       document.querySelector(".box").className = "box changing";     }); });

   
   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.