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:

transition-property Lista CSS atributa koji će biti animirani tokom tranzicije
transition-duration Dužina trajanja tranzicije
transition-delay Dužina pauze pre početka tranzicije
transition-timing-function Vremenski raspored međufaza u tranziciji
transition Kompleksni atribut za definisanje CSS tranzicije

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:

Važe i globalne vrednosti:

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.

transition-property: [atribut] transition-property: [atribut], [atribut], ... transition-property: all

Primer za tranzicije

Promena CSS formatiranja preko pseudo-klase hover

Najjednostavniji način aktiviranja tranzicije je korišćenjem pseudo-klase hover.


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

U ovom primeru vidimo da je za element klase primer definisano, da ako se miš dovede iznad njega, tekst iz crvene pređe u plavu boju. Međutim, za klasu je takođe definisano da se vrši tranzicija po atributu color u trajanju od 1 sekunde.

Kada god se iz nekog razloga elementu promeni boja teksta, ta promena će biti animirana. Sticajem okolnosti, to se dešava kada se miš postavi iznad elementa, ali i kada se ukloni.

Pogledajte primer u kome smo iskoristili mogućnost animiranja transformacije (rotaciju).

css-tranz-hover-sr

Promena klase elementa

Drugi način bi bio korišćenjem JavaScripta. Ovde ćemo aktivirati tranziciju prostom promenom klase elementa.


  <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>

U HTML delu postoji DIV blok klase prva. U nekom trenutku (ovde nije prikazano zbog jednostavnosti), aktivira se JavaScript funkcija fun(), koja tom bloku menja svojstvo className, tačnije menja mu klasu.

U CSS delu možemo videti kako su definisani stilovi pod selektorima klase (prva i druga). Slova u DIV bloku su inicijalno crvena, a kada mu se zada klasa druga, postaju plava. Vidimo i da je za klasu druga definisana tranzicija, i to upravo za atribut color u trajanju od 1 sekunde.

Sledeća stvar je važna: tranzicije se aktiviraju od trenutka kada su zadate. Dakle, element prvo dobije tranziciju, a onda sve ostale atribute. To znači da kada element dobije klasu druga, animira promenu boje teksta iz crvene u plavu.

U obrnutom slučaju, ako bi elementu klase druga promenili klasu u prva, element bi izgubio tranziciju (ne postoji u klasi prva), i samim tim promena boje iz plave u crvenu ne bi bila animirana.

Pogledajte primer koji istovremeno demonstrira tranziciju pri promeni klase ali i način kako da animiramo prebacivanje elementa od leve do desne ivice.

css-tranz-klasa-sr

Promena inline stila

Pomoću JavaScripta takođe možemo direktno menjati pojedina CSS svojstva elemenata.


  <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>

Situacija je skoro ista kao malopre, s tim što je sada početno formatiranje elementa definisano u klasi klasa, a tu je i zadata tranzicija elementa po atributima background-color i width.

Promena nastaje kada se aktivira funkcija fun(), ali sada se ne menja klasa, već se postavljaju svojstva HTML elementa, što je ekvivalentno zadavanju inline stila. U tom trenutku počinje animacija, koja traje 1 sekundu.

css-tranz-inline-sr

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:

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.

transition-duration: [trajanje] transition-duration: [trajanje], [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 za transition-duration

Sve napisano možda i nema puno smisla dok ne pogledamo par primera...


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

Ovo je prilično jednostavna situacija. Kroz tranziciju se animiraju atributi width i height. Za promenu širine će trebati 1 sekunda, a za promenu visine samo pola sekunde (500 milisekundi).


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

U ovom primeru imamo situaciju sa 5 atributa i samo 3 trajanja. Kako će se razrešiti? Animacije atributa left, top, color će trajati, kako je navedeno u listi, 1s, 0.5s, 0.8s. Za sledeća dva atributa, lista "kreće" ispočetka, pa animacije atributa background-color i font-size traju 1s i 0.5s.


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

U najvećem broju slučajeva ćemo želeti da animacija svih atributa traje podjednako, tako da će ovo biti najčešća situacija - navodimo više atributa, a samo jedno trajanje koje se odnosi na sve atribute. To znači da se promena po oba atributa transform i border animira za pola sekunde.

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.

transition-delay: [trajanje] transition-delay: [trajanje], [trajanje], ...

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 za transition-delay

Evo kako bismo zadali odlaganje početka animacije.


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

Dakle, animira se promena pozicije po levoj strani i boje pozadine. Vidimo da će pomeranje trajati 1 sekundu, a promena boje pola sekunde. Međutim, promena boje će se završiti posle pomeranja. Pomeranje počinje odmah (odlaganje od 0 sekundi), a promena boje počinje odloženo za 1 sekundu. To znači da će promena boje početi kada element završi pomeranje i onda će trajati pola sekunde.

css-tranz-delay-sr

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:

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

transition-timing-function: [funkcija] transition-timing-function: [funkcija], [funkcija], ...

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 za transition-timing-function

Primer zadavanja funkcije tajminga animacije.


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

Primer je sličan prethodnom. Vidimo da su zadati atributi koji se animiraju left i background-color. Trajanje animacije je 2 sekunde, a tajming funkcija je ease-in-out.

Pogledajte primer u kome upoređujemo više tajmig funkcija. Primetićete da se animacija uvek odvija za isto vreme, ali su međufaze drugačije raspoređene.

css-tranz-timing-sr

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.

transition: [atribut] [trajanje] transition: [atribut] [trajanje] [odlaganje] transition: [atribut] [trajanje] [tajming-funkcija] [odlaganje]

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

transition: [kombinacija], [kombinacija]...

Primer za transition

Pogledajte kako se nekoliko atributa tranzicije mogu zameniti jednim kompleksnim atributom.


  .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;
  }
  1. Mozilla Developer Network, Using CSS Transitions
  2. Mozilla Developer Network, Timing function
  3. D. Storey (2012): Pro CSS Animation, Apress, New York
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.