Što su CSS animacije?
CSS animacije omogućuju stvaranje glatkih prijelaza i efekata na web stranicama bez korištenja JavaScripta. Pomoću njih možete animirati gotovo svako CSS svojstvo, na primjer boju, poziciju, veličinu, rotaciju i mnoge druge karakteristike elemenata.
Animacije pružaju bolju korisničku interakciju, povećavaju angažman posjetitelja i daju vašoj web stranici moderan izgled.
@keyframes
@keyframes je CSS pravilo koje definira korake vaše animacije. Pomoću keyframes-a, definirate kako će se element mijenjati tijekom animacije - od početnog stanja (0% ili "from") do završnog stanja (100% ili "to").
animation-name
animation-name određuje koji @keyframes će biti primijenjen na element. Ovo je referenca na naziv animacije koju ste definirali u @keyframes pravilu.
Ovaj atribut povezuje element s animacijom koju ste definirali. Bez njega, vaš element ne bi znao koju animaciju koristiti.
animation-duration
animation-duration određuje koliko dugo će animacija trajati. Vrijednost se definira u sekundama (s) ili milisekundama (ms).
Ako ne definirate trajanje, zadana vrijednost je 0s, što znači da se animacija neće prikazati.
animation-delay
animation-delay određuje vrijeme čekanja prije nego što animacija započne. Kao i animation-duration, vrijednost se definira u sekundama (s) ili milisekundama (ms).
Negativne vrijednosti su dopuštene i uzrokuju da animacija odmah počne, ali kao da je već prošla to vrijeme.
animation-iteration-count
animation-iteration-count definira koliko puta će se animacija ponoviti. Može biti broj ili infinite za beskonačno ponavljanje.
Nakon što animacija završi zadani broj ponavljanja, element ostaje u završnom stanju animacije (osim ako je definiran animation-fill-mode).
animation-direction
animation-direction određuje smjer reprodukcije animacije. Može imati sljedeće vrijednosti:
- normal: animacija se izvodi normalno (od početka do kraja)
- reverse: animacija se izvodi unatrag (od kraja prema početku)
- alternate: animacija se izvodi normalno, a zatim obrnuto
- alternate-reverse: animacija se izvodi obrnuto, a zatim normalno
Ovo svojstvo je korisno za stvaranje efekata koji se glatko kreću naprijed-nazad.
animation-timing-function
animation-timing-function određuje brzinu promjene svojstava tijekom animacije. Definira kako se vrijednosti računaju između početne i krajnje točke.
Najčešće vrijednosti su:
- ease: polako počinje, zatim ubrzava i na kraju usporava (zadano)
- linear: konstantna brzina tijekom cijele animacije
- ease-in: polako počinje, zatim ubrzava
- ease-out: počinje brzo, zatim usporava
- ease-in-out: polako počinje, ubrzava u sredini i usporava na kraju
- cubic-bezier(n,n,n,n): prilagođena krivulja brzine
Različite timing funkcije daju različit osjećaj animaciji, od mehaničkih do organskih pokreta.
animation-fill-mode
animation-fill-mode određuje kako se animacija ponaša prije i nakon izvođenja. Može imati sljedeće vrijednosti:
- none: element nije pod utjecajem animacije prije ili nakon izvođenja (zadano)
- forwards: element zadržava vrijednosti zadnjeg keyframe-a nakon završetka animacije
- backwards: element odmah poprima vrijednosti prvog keyframe-a i zadržava ih tijekom animation-delay
- both: kombinira forwards i backwards
Ovo svojstvo je osobito korisno kada želite da element zadrži svoje krajnje stanje animacije, umjesto da se vrati na početno stanje.
Shorthand - animation
Skraćeni animation svojstvo omogućuje vam da definirati sve animacijske atribute u jednoj liniji, čineći vaš kod kraćim i čitljivijim.
Redoslijed nije važan za sve vrijednosti, ali preporučuje se koristiti gore navedeni redoslijed za konzistentnost. Ako izostavite neku vrijednost, koristit će se zadana vrijednost.
Najbolje prakse za CSS animacije
- Koristite transformacije i opacity: ove animacije su najefektivnije i najmanje opterećuju procesor.
- Izbjegavajte animiranje layout svojstava: svojstva poput width, height, padding, margin mogu biti zahtjevna za animiranje.
- Koristite will-change: za optimizaciju performansi, najavite browseru koje svojstvo će se mijenjati.
- Razumno koristite: previše animacija može biti distrakcija i smanjiti korisničko iskustvo.
- Testirajte na različitim uređajima: animacije se mogu različito ponašati na mobilnim i desktop uređajima.
Zaključak
CSS animacije su moćan alat za poboljšanje korisničkog iskustva i dodavanje dinamičnosti vašim web stranicama. Razumijevanjem i kombiniranjem različitih svojstava animacija, možete stvoriti složene i privlačne efekte koji će vašu web stranicu izdvojiti od drugih.
Eksperimentirajte s različitim kombinacijama i otkrijte što najbolje funkcionira za vaš projekt!