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...
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:
- boja teksta i pozadine, posebno ako se setimo da boja takođe može biti poluprovidna
- pozicija i veličina elementa
- manipulacije pozadinom
- efekti prikaza, kao što su senke i poluprovidnost
- transformacije
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...
- The Web Evolved, CSS Animatable Properties: Browser support
- Tutorial Republic, CSS Animatable Properties