CSS animacije omogućuju stvaranje dinamičnih vizualnih efekata na web stranici bez potrebe za JavaScriptom. U nastavku ćemo objasniti ključne pojmove koji se koriste u CSS animacijama.
@keyframes je pravilo koje definira ključne točke animacije, tj. kako se elementi mijenjaju tijekom vremena. Svaka ključna točka označava promjenu u stilu animiranog elementa.
@keyframes primjer {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
Ovaj CSS atribut postavlja ime animacije koja je definirana u @keyframes. To ime se koristi za povezivanje animacije s elementom na stranici.
element {
animation-name: primjer;
}
animation-duration određuje koliko dugo traje cijela animacija. Vrijednost može biti u sekundama (s) ili milisekundama (ms).
element {
animation-duration: 2s;
}
animation-delay postavlja vremenski odgodu prije nego što animacija započne. Vrijednost može biti u sekundama (s) ili milisekundama (ms).
element {
animation-delay: 1s;
}
animation-iteration-count postavlja broj ponavljanja animacije. Možete postaviti broj ponavljanja ili koristiti 'infinite' za beskonačno ponavljanje.
element {
animation-iteration-count: infinite;
}
animation-direction kontrolira smjer u kojem se animacija izvodi. Može biti 'normal' (standardno), 'reverse' (obrnutim smjerom), 'alternate' (izmjenjuje smjer pri svakom ponavljanju) ili 'alternate-reverse'.
element {
animation-direction: alternate;
}
animation-timing-function definira brzinu promjena tijekom animacije. Možete koristiti vrijednosti poput 'ease', 'linear', 'ease-in', 'ease-out' i druge.
element {
animation-timing-function: ease-in-out;
}
animation-fill-mode određuje kako će se element ponašati nakon što animacija završi. Moguće vrijednosti su 'none', 'forwards', 'backwards' ili 'both'.
element {
animation-fill-mode: forwards;
}
animation je skraćeni zapis za sve animacijske osobine. Omogućuje vam postavljanje svih tih svojstava u jednoj liniji.
element {
animation: primjer 2s infinite ease-in-out;
}