Uvod u animaciju sa CSS-om

Kako se izvodi animacija sa CSS-om

Animacija pokretana iz CSS je nastala kao potreba front-end programera da imaju mogućnost definisanja ove interakcije bez upotrebe JavaScript-a ili eventualno zastarelog Flash-a. Dva glavna svojstva omogućavaju animaciju iz CSS-a:

• transition
• animation

Svojstvo “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.
Svojstvo “animation” se takodje zasniva na promeni svojstva nekog elementa u toku vremena ali dozvoljava malo bolju kontrolu i ima dodatne druge specifičnosti.

Koja svojstva animirati?

Ne mogu sva CSS svojstava biti animirana, ali većina ipak može, spisak svih svojstva koja mogu biti animirana možete pogledati ovde. Pošto animiranje zna da bude zahtevan proces kada su u pitanju resursi, potrebno je obratiti dodatnu pažnu na zahtevnost animacije. CSS animacije nisu automatski ubrzane sa GPU, međutim, neki browseri obezbeđuju hardversko ubrzanje određenih osobina kako bi pružile bolje performanse pri renderingu. Hardversko ubrzanje (eng. Hardware acceleration) znači da će ” Graphics Processing Unit” (GPU) pomoći u renderovanju stranice tako što će obavljati neke od težih zadataka, umesto “Central Processing Unit-a” (CPU-a). Stoga ako su resursi ograničeni trebali bi izbegavati svojstva koja ne podržavaju hardware acceleration. Danas su svojstva “transform” i “opacity” u prednosti kada je u pitanju animacija, jer im GPU pomaže pri izršavanju, pa ih treba koristi kad god je to moguće:

• opacity
• transform: translate()
• transform: rotate()
• transform: scale()

Za razliku od pomenutih svojstva, u “skupa” svojstva pripadaju sva koja menjaju geometriju stranice (layout), jer ako menjate jedan element, često je potrebno da browser ponovo preračuna geometriju svih drugih elemenata. Takodje menjanje boje pripada grupi “skupih” operacija.

NAPOMENA:
U želji da se poboljša iskorišćavanje resursa i optimizujeu animacija je uvedeno novo CSS svojstvo “will-change”. Svojstvo “will-change”, nam omogućava da unapred obavestimo browser o tome koje vrste promena ćemo verovatno napraviti, tako da se browser može na vreme pripremiti i aktivirati odgovarajuće optimizacije pre nego što dodje do same animacije. Više o ovome svojstvu pročitajte na MDN-u u članku “will-change”.

Razlike izmedju “transition” i “animation”

@keyframes

U svojstvu “transition” se animacija izvršava samo na osnovu početnih i krajnjih vrednosti nekog CSS svojstva, dok kod svojstva “animation” imamo mogućnost da kroz @keyframe definišemo neograničen broj medjuvrednosti.

Pokretanje animacije

Druga bitna razlika između svojstva “animation” i “transitions” može se videti u načinu na koji se započinje animacija. Svojstvo “transition” izvodi animaciju samo kao reakciju na promenu CSS svojstva koje se prati (npr. kada sa hover-om na element promenimo vrednost nekog svojstva). Dok animacije sa svojstvom “animation” ne zahtevaju eksplicitno aktiviranje (iako je naravno i takav način moguć), te one mogu automatski započeti reprodukciju odmah po učitavanju.

Looping

Svojstvo “transition” može da se pokrene samo jednom (za iste vrednosti), dok s druge strane svojstvo “animation” može da definiše koliko puta želimo da se izvrši ista animacija (ukjučujući i infinite).

Odloženo pokretanje

Svojstvo “animation” za razliku od “transition” može da odloži pokretanje animacije.

Interakcija sa JavaScript-om

Kada želimo tzv. hibridni pristup u kojem se animacija primarno definiše u CSS-u, ali se iz JavaScirpt-a manipuliše određenim aspektima animacije, tada je uvek bolje koristiti svojstvo “transition”. Korišćenje svojstva “animation sa JavaScriptom je takodje moguće, ali je iz JavaScript-a komplikovano modifikovanje @keyframes svojstva.

Zaključak:

Moj pristup izboru svojstva se svodi na sledeće dileme:

• Ako je animacija jednostavna i bez “lupovanja”, onda koristim svojstvo “transitions”.
• Ako je animacija komplikovana ili ima “lupovanje”, onda koristim svojstvo “animations”.
• Ako želim da manipulišem vrednostima svojstava koristeći JavaScript, onda koristim svojstvo “transition”.

BONUS: svojstvo “transform”

Transform svojstvo ne vrši nikakvu animaciju, ali se često koristi uz prethodno pomenuta CSS svojstva koja su zadužena za animaciju (transition/animation). U stvari animacije ili tranzicije nakon promene vrednosti “transform” svojstva mogu biti veoma interesante i upečatljive.

Svojstvo “transform” u zavisnosti od njegove vrednosti nam omogućava da HTML element:

• transliramo duž osa

  transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: translate3d(x, y, z)

  1 2 3 4

  transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: translate3d(x, y, z)

• rotiramo

  transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: rotate3d(x, y, z);

  1 2 3 4

  transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: rotate3d(x, y, z);

• skaliramo po veličini

  transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: scale3d(sx, sy, sz)

  1 2 3 4

  transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: scale3d(sx, sy, sz)

• iskosimo

  transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad);

  1 2 3

  transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad);

• dodamo perspektiu

  transform: perspective(17px);

  1	transform: perspective(17px);

  Transform svojstvo sa ovako definisanom vrednosti (“perspective”) ne utiče na sam element, ali utiče na 3D transformacije potomaka, tako da im omogućava perspektivu dubine.

Primer

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