CSS tranzicije

Tranzicije su vrsta animacije HTML elemenata pomoću CSS-a. HTML elementima je posle učitavanja stranice, moguće promeniti izgled. Umesto da se desi trenutno, ta promena izgleda može biti postepena, odnosno animirana, što svakako stvara lepši vizuelni utisak.

Kako naterati elemente da promene izgled, kada je stranica već učitana i prikazana? Možda najjednostavniji način je kreiranje CSS stila koji se menja kada korisnik dovede miš iznad elementa. Ovo postižemo pomoću, dobro poznate, pseudo-klase hover. Kao što znamo, u pseudo-klasi definišemo kako se menja izgled elementa u određenim situacijama. Ta promena može biti postepena (animirana).

Drugi način za promenu izgleda elementa je pomoću JavaScripta i to korišćenjem Web DOM programiranja. Iako spada u programiranje, promena izgleda nije zaista teška - jednom kada "dohvatimo" HTML element, možemo mu promeniti inline stil korišćenjem podobjekta style ili celu klasu preko svojstva className. Svaka od ovih promena može biti animirana pomoću CSS tranzicija.

Da bismo postigli efekat tranzicije, koristimo sledeće CSS atribute:

Animirani atributi

Najpre ćemo se pozabaviti CSS atributom transition-property koji predstavlja listu onih CSS atributa koje želimo da animiramo. Treba da znamo da se samo neki atributi mogu animirati, tako da samo njih i ima smisla ubacivati u ovu listu.

Atribut transition-property ima i nekoliko unapred definisanih vrednosti:

• all - biće animirani svi atributi elementa koji mogu biti animirani
• none - animacija se neće desiti ni po jednom atributu, praktično ovo je isključivanje animacije

Važe i globalne vrednosti:

• initial - atribut će biti resetovan na početnu vrednost (u ovom slučaju praznu listu)
• inherit - atribut nasleđuje vrednost od nadređenog elementa
• unset - atribut će biti resetovan na početnu vrednost (pošto se ne nasleđuje)

Uobičajeno, navešćemo one CSS atribute za koje želimo da se animiraju. Alternativno, možemo navesti vrednost all, koja će značiti da se animira sve što može.

  .primer {
    color: red;
    transition-property: color;
    transition-duration: 1s;
  }
  .primer:hover {
    color: blue;
  }

  <script>
    function fun() {
      document.getElementById("blok").className = "druga";
    }
  </script>
  
  <style>
    .prva {
      color: red;
    }
    .druga {
      color: blue;
      transition-property: color;
      transition-duration: 1s;
    }
  </style>
  ...
  <div id="blok" class="prva">Blok koji se animira.</div>

  <script>
    function fun() {
      document.getElementById("blok").style.backgroundColor = "blue";
      document.getElementById("blok").style.width = "300px";
    }
  </script>
  
  <style>
    .klasa {
      color: red;
      width: 400px;
      transition-property: background-color, width;
      transition-duration: 1s;
    }
  </style>
  ...
  <div id="blok" class="klasa">Blok koji se animira.</div>

Trajanje animacije

Trajanje animacije je druga važna stvar koju želimo da podesimo kada radimo sa tranzicijama. Od svih atributa koji služe za kontrolu trajanja, najviše ćemo koristiti trasition-duration čija vrednost predstavlja dužinu trajanja tranzicije u obliku metrike. Vremensko trajanje se zadaje sa dve moguće jedinice mere:

• s - sekunde (npr. 5s, 1.5s)
• ms - milisekunde - milisekunda je hiljaditi deo sekunde (npr. 1000ms, 500ms)

Videli smo da se vrednost atributa transition-property može zadati u obliku liste. Isto važi i za ovaj atribut. Pri tome bi svako trajanje iz liste trebalo da odgovara jednom atributu zadatom u listi. To znači da animacija po različitim atributima može imati različito trajanje.

Kako se razrešava situacija kada se broj atributa iz transition-property ne poklapa sa brojem trajanja zadatih u transition-duration?

Ako je broj zadatih trajanja veći od broja atributa, onda nema problema - "višak" se prosto ignoriše. Sa druge strane, ako je zadato manje trajanja od broja atributa, onda se lista trajanja "vrti" ispočetka dok se ne "zadovolje" svi atributi. To je prilično zgodno, jer ako navedemo samo jedno trajanje, ono će se odnositi na sve atribute.

  .primer {
    transition-property: width, height;
    transition-duration: 1s, 500ms;
  }

  .primer {
    transition-property: left, top, color, background-color, font-size;
    transition-duration: 1s, 0.5s, 0.8s;
  }

  .primer {
    transition-property: transform, border;
    transition-duration: 500ms;
  }

Redosled zadavanja svojstava u atributu transition-property nije značajan. To, kojim redom smo zadali atribute, ne znači da će prvo da se animira prvi, pa drugi, pa treći, itd. Kada nastupi promena, svi atributi počinju da se animiraju istovremeno, a zavisno od njihovog trajanja mogu da se završe u različito vreme.

Međutim, ako želimo, možemo uticati na početak animacije po svakom atributu, korišćenjem atributa transition-delay. Ovaj atribut je veoma sličan atributu transition-duration, pošto kao vrednost takođe može imati listu trajanja izraženu u vremenskim jedinicama.

Trajanje koje se zada u ovom atributu označava odlaganje početka animacije po određenom atributu.

Ako se zada manji broj trajanja u odnosu na broj animiranih atributa zadatih u transition-property, atributi za koje nedostaju trajanja neće imati odlaganje. Ovo ponašanje se razlikuje od atributa transition-duration.

Interesantno je da odlaganje može biti zadato i kao negativna vrednost. To bi značilo da bi animacija atributa trebalo da je počela još i pre nego što je došlo do akcije koja je izazvala animaciju. Ovo je naravno nemoguće, ali web čitač će se "snaći" tako što će animacija početi u isto vreme kada i ostale animacije, ali će izgledati kao da počinje "iz sredine".

  .primer {
    transition-property: left, background-color;
    transition-duration: 1s, 0.5s;
    transition-delay: 0s, 1s;
  }

Poslednja stvar vezana za kontrolu "tajminga" predstavlja mogućnost da utičemo na vremenski raspored međufaza animacije. Šta to znači? Zamislite da neki blok treba pomeriti za 100px tokom 5 sekundi. Za koliko će se on pomeriti svake sekunde? Logičan odgovor bi bio da se svake sekunde blok pomera za 20px. Ovo je najjednostavnija animacija, ali istovremeno, kada se gleda, deluje mehanički. Mnogo bolje bi bilo kada bi blok npr. polako ubrzao na početku i lagano usporio na kraju animacije.

Drugim rečima, bilo bi idealno kada bismo mogli da definišemo ubrzanje i usporenje animacije. Upravo ovakve stvari kontrolišemo atributom transition-timing-function, gde kao vrednost zadajmo "funkciju" po kojoj se određuje tajming animacije. Ovaj atribut ima više unapred definisanih vrednosti:

• linear - animacija konstantnom brzinom, (već pomenuto "mehaničko kretanje")
• ease-in - lagano ubrzavanje, nagli završetak (kao kod linearnog tajminga)
• ease-out - nagli početak (kao linearno), lagano usporavanje na kraju
• ease-in-out - lagano ubrza i lagano uspori na kraju (simetrično ubrzavanje i usporavanje)
• ease - isto kao prethodna, s tim što naglije ubrzava na početku i laganije usporava na kraju (ovo je default tajming)
• step-start - odmah skoči na kraj animacije i ne menja se tokom celog trajanja (sve vreme prikazuje krajnju fazu)
• step-end - tokom celog trajanja se ne menja (prikazuje početnu fazu), tek na kraju "skoči" na kraj animacije

I ovde je moguće zadati čitavu listu tajming-funkcija, koje će se onda primenjivati na atribute zadate u transition-property, prema redosledu.

Ako zadamo manje funkcija u odnosu na broj animiranih atributa, oni atributi za koje "fale" funkcije će imati podrazumevanu vrednost (ease).

Ne zaboravite jako važnu stvar. Ove funkcije utiču samo na tajming animacije, ne i na putanju. Znači, ako se animacija sastoji iz kretanja od tačke A do tačke B, sama putanja će i dalje biti linearna - objekat koji se kreće neće "zavijati" pravac.

  .primer {
    transition-property: left, background-color;
    transition-duration: 2s;
    transition-timing-property: ease-in-out;
  }

Kompleksni atribut tranzicije

Sve što smo do sada naučili, moguće je obaviti u jednom potezu, atributom transition. Ovaj način je prilično efikasan ako imamo svega par atributa kojima želimo da podesimo sve parametre animacije, ali dalje od toga postaje malo nepregledan.

Kao vrednost se u stvari zadaje kombinacija vrednosti kojima se definiše animacija po jednom atributu. Obratite pažnju da, pošto se zadaju dve vremenske vrednosti, uvek prva označava trajanje, a druga odlaganje. Naravno, nisu sve vrednosti obavezne, ali ova kombinacija bi uvek trebala da sadrži makar atribut i trajanje. Besmisleno je zadavati samo atribute bez trajanja, pošto se u tom slučaju računa podrazumevano trajanje od 0 sekundi - dakle, praktično nema animacije. Ako se ne zadaju tajming-funkcija i odlaganje, podrazumevaju se vrednosti ease i 0s.

Naravno, i ovde je moguće zadati čitavu listu kombinacija.

  .primer1 {
    transition-property: left, background-color;
    transition-duration: 2s, 1s;
    transition-timing-property: ease-in, linear;
  }

  .primer2 {
    transition: left 2s ease-in, background-color 1s linear;
  }