CSS Animacije

Osnovni vodič kroz CSS animacije i njihova svojstva

Što su CSS animacije?

CSS animacije omogućuju promjenu izgleda i ponašanja HTML elemenata bez korištenja JavaScripta ili Flash tehnologije. Animacije se sastoje od dva ključna dijela:

Uz pomoć CSS animacija možemo kreirati složene vizualne efekte koji mogu značajno poboljšati korisničko iskustvo na web stranicama.

@keyframes

Ovo je pravilo kojim definiramo što se događa u određenim točkama tijekom animacije. Ovdje definirate slijed stilova koje će element poprimiti tijekom jednog ciklusa animacije.

@keyframes ime-animacije {
  0% {
    svojstvo: vrijednost;
  }
  50% {
    svojstvo: vrijednost;
  }
  100% {
    svojstvo: vrijednost;
  }
}

Ključne točke mogu biti definirane pomoću postotaka (od 0% do 100%) ili pomoću ključnih riječi from (isto kao 0%) i to (isto kao 100%).

Svojstva animacija

animation-name

Određuje ime @keyframes animacije koja će se primijeniti na element. Ovo ime mora odgovarati imenu definiranom u @keyframes pravilu.

animation-name: ime-animacije;

Ako želimo da element nema animaciju, koristimo vrijednost none.

animation-duration

Definira koliko će vremena trajati jedan ciklus animacije. Ovo je obavezan parametar jer je zadana vrijednost 0s, što znači da se animacija neće izvršiti.

animation-duration: 3s;

Vrijednost se izražava u sekundama (s) ili milisekundama (ms).

animation-delay

Određuje koliko će vremena proći prije nego što animacija započne. Korisno za stvaranje sekvencijalnih animacija.

animation-delay: 1s;

Može imati i negativne vrijednosti, što znači da će animacija započeti kao da je već odrađen određeni dio.

animation-iteration-count

Definira koliko će se puta animacija ponoviti prije nego što se zaustavi.

animation-iteration-count: 3;

Osim numeričkih vrijednosti može imati i vrijednost infinite za beskonačno ponavljanje.

animation-direction

Određuje treba li se animacija izvoditi unaprijed, unatrag ili izmjenjivati između naprijed i natrag.

animation-direction: alternate;

Moguće vrijednosti:

animation-timing-function

Određuje kako se izračunavaju međuvrijednosti animacije, tj. definira brzinu tijekom različitih dijelova animacijskog ciklusa.

animation-timing-function: ease-in-out;

Najčešće vrijednosti:

animation-fill-mode

Određuje koji stilovi se primjenjuju na element prije i nakon izvođenja animacije.

animation-fill-mode: forwards;

Moguće vrijednosti:

animation (skraćeni zapis)

Ovo je skraćeni zapis koji omogućuje definiranje svih animacijskih svojstava u jednoj liniji. Redoslijed vrijednosti nije strogo definiran, ali se preporučuje sljedeći redoslijed radi lakšeg čitanja:

animation: ime-animacije trajanje timing-function delay iteration-count direction fill-mode;

Primjer skraćenog zapisa:

animation: fade-in 2s ease-in 0.5s 3 normal forwards;

Obavezne vrijednosti u skraćenom zapisu su samo ime animacije i trajanje. Sve ostale vrijednosti su opcionalne i ako se izostave, koristit će se njihove zadane vrijednosti.