ELPROS
Tranzicije i animacije

Tranzicije i animacije

Ugradnja animacija u web-stranicu primjenom liste stilova

  • Animacije u CSS-u kreiraju se tako da se u određenom vremenskom periodu mijenjaju vrijednosti odabranih svojstava.
  • Svojstva pomoću kojih je to moguće napraviti su:
  • transition
  • animation

—————————————————————————————————————————————————————

  • CSS stilovima se postupno mijenja vrijednost određenih svojstava a kontrola animacije se postiže pomoću ključnih okvira (engl. keyframes).
  • Animacija se sastoji od liste stilova koji je opisuju i niza okvira koji određuju njena međustanja.
  • CSS animacija je niz slika određenog objekta koji svojim rasporedom stvaraju privid pokreta.
  • Vrijeme prikaza dijelova animacije definira se postotkom i sve vrijednosti unutar ključnog okvira moraju biti poredane uzlazno.

—————————————————————————————————————————————————————

Tranzicije

  • Pri izradi CSS animacija za promjenu elementa iz jednog stanja u drugo koriste se prijelazi (tranzicije).
  • Kod svojstva animation animacije mogu pokretati i automatski pri njihovom učitavanju dok kod svojstva transition to nije moguće.
  • Tranzicije se mogu pokrenuti samo jednom dok je animacije moguće ponavljati određeni broj puta.
  • Kod tranzicija se svojstvo prebacuje iz jednog stanja u drugo, odnosno animacija se odvija samo pomoću definiranja početnih i krajnjih vrijednosti nekog CSS svojstva.

—————————————————————————————————————————————————————

Svojstva tranzicije

  • transition-duration – vrijeme trajanja izraženo u sekundama
  • transition-timing-function – tempo prijelaza
  • transition-delay – odgoda početka tranzicije
  • transition-property – svojstvo na koje se tranzicija primjenjuje.
  • transition: [property] [duration] [timing-function] [delay];

  • transition: font-size 2s linear 500ms;

—————————————————————————————————————————————————————

Tempo prijelaza

  • Tempo prijelaza se definira svojstvom transition-timing-function.
  • Podrazumijevana vrijednost timing-function je ease 0s.
  • Vrijednosti svojstva vezana su uz Bezierovu krivulju cubic-bezier(x1,y1,x2,y2).

 

ease cubic-bezier(0.25,0.1,0.25,1)
linear cubic-bezier(0, 0,1,1)
ease-in cubic-bezier(0.42,0,1,1)
ease-out cubic-bezier(0,0,0.58,1)
ease-in-out cubic-bezier(0.42,0,0.58,1)
step-start steps(1,start)
step-end steps(1,end)
cubic-bezier(n,n,n,n)  
steps(int,start|end)  

—————————————————————————————————————————————————————

Transformacije

  • Transformacije omogućavaju elementima promjenu oblika, veličine i pozicije.
  • Potrebno je razlikovati 2D i 3D transformacije.
  • Transformacije se deklariraju kao funkcije unutar svojstva transform.
  • Transformirani element se ponaša kao da je pozicioniran relativno.
  • Element  se ne mijenja i zadržava svoj položaj, a promijenila se njegova slika i tako je stvoren privid pomaka.

—————————————————————————————————————————————————————

3D tranzicije

  • 3D tranzicije dodaju treću dimenziju na zadani element.
  • Element se rotira oko svoje x-osi ili y-osi.
  • Za 3D rotiranje objekta, koristite transformsvojstvo u kombinaciji s metodama rotateX() ili rotateY().
  • Metode rotateX() ili rotateY() imaju jedan argument, a to je za koliko stupnjeva će se okrenuti oko osi.
Literatura:
https://www.w3schools.com/css/css3_animations.asp
Sadržaj sa Loomena
Skip to content