CSS animacija

CSS animacija se odnosi na postepenu promenu vrednosti određenih CSS atributa. Ovakav efekat je moguće ostvariti kroz tranzicije i kroz "prave" animacije.

Već znamo da HTML elementi mogu da menjaju svoje CSS atribute u određenim situacijama. To može veoma jednostavno da se reši pomoću JavaScripta i DOM programiranja, pa čak i pomoću čistog CSS-a (npr. upotrebom hover pseudo-klase).

Primer

Promena boje elementa

Recimo da je situacija ovakva: imamo neki HTML element žute boje, a želimo da kada miš dovede iznad njega, on promeni boju u crvenu. Ovo se lako rešava pomoću CSS-a.


  #element {
    background-color: yellow;
  }
  
  #element:hover {
    background-color: red;
  }

Zahvaljujući pseudo-klasi hover, element će postati crven kada dovedemo miš iznad njega, a kada ga sklonimo, vratiće se na žutu boju. Ova promena će se odvijati trenutno.

Međutim, moguće je napraviti i da se promena dešava postepeno, tokom nekog vremenskog trajanja. Tada govorimo o animaciji, konkretno o tranziciji.


  #element {
    background-color: yellow;
    trasition-property: background;
    trasition-duration: 1s;
  }
  
  #element:hover {
    background-color: red;
  }

Sada će se boja pozadine "lagano" menjati iz žute u crvenu i obrnuto i to tokom jedne sekunde. Isprobajte sami...

css-anim-npr-color-sr

Naravno, ne može se baš svaki CSS atribut animirati. Npr. ako zadamo da je neki tekst poravnat ulevo, ne možemo očekivati da se postepeno poravna udesno. Zašto? Pa suštinski zato što su vrednosti poravnanja neke unapred definisane deklarativne vrednosti - levo, desno, sredina, po obe margine. Nemoguće je (ili bar jako komplikovano) izračunavati međufaze u animaciji. To nas dovodi do toga da ćemo najpre animirati atribute čija je vrednost metrička, procentualna, numerička ili kao što smo videli, kolorna.

Hajde da vidimo koje atribute je uopšte moguće animirati.

color
font-size
font-weight
text-indent
line-height
letter-spacing
word-spacing
Atributi teksta i fonta
background Animira se boja pozadine, ali i veličina (background-size) i pozicija (background-position)
box-shadow
text-shadow
Atributi koje koristimo za efekat senke
width
height
Atributi koji se odnose na dimenzije elementa, što uključuje i maksimalne i minimalne dimenzije (max-width, min-width...)
margin
padding
Atributi unutrašnje i spoljne margine, u smislu da im je moguće menjati veličinu, kako zbirno, tako i pojedinačno
border Moguće je animirati boju i debljinu okvira, ali ne i vrstu linije. Kod tabela je moguće još animirati i razmak među ćelijama (border-spacing), kao i zaobljenje okvira (border-radius)
outline Moguće je animirati boju i debljinu okvira, ali i njegov razmak od elementa (outline-offset)
top
left
bottom
right
Atributi koji se odnose na pozicioniranje elementa
transform
perspective
Atributi koji se odnose na transformaciju izgleda elementa, što uključuje i poziciju referentne tačke (trasform-origin) i tačke nedogleda (perspective origin)
columns Atributi vezani za formatiranje stubaca, i to broj, širina i razmak, kao i boja i debljina linije između stubaca.
flex
order
Atributi fleksibilnog box layouta
opacity
visibility
Efekat providnosti se animira onako kako očekujemo, dok animiranje atributa vidljivosti ne podrazumeva njegovo postepeno "nestajanje"
z-index Atribut "dubine elementa" po z-osi koji u stvari kontroliše koji eleemnt se iscrtava preko koga

Popularni efekti animacije (koji vas verovatno najviše interesuju) su svakako promene atributa koji se odnose na:

Animacije i tranzicije možemo koristiti prilikom ulaska na stranicu, tokom skrolovanja ili kao "reakciju" na bilo kakve druge aktivnosti korisnika.

Pogledajte još jedan primer onoga što ćemo tek da učimo...

css-anim-npr-misc-sr
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.