CSS Animacije

CSS animacije omogućuju promjenu stila elementa postepeno, od jednog seta CSS vrijednosti do drugog. Sastoje se od dva dijela: opisivanja animacije pomoću @keyframes pravila i postavljanja svojstava te animacije na željenom elementu.

Što su CSS animacije?

CSS animacije dopuštaju animiranje prijelaza s jednog CSS stila na drugi. Animacije se sastoje od dva dijela:

Prednosti CSS animacija uključuju:

@keyframes

@keyframes

Ovo pravilo definira korake/stadije vaše animacije. Svaki korak određuje kako bi animirani element trebao izgledati u određenom trenutku.

@keyframes imeAnimacije {
  0% {
    /* Stilovi na početku animacije */
    transform: translateX(0);
  }
  50% {
    /* Stilovi na polovici animacije */
    transform: translateX(200px);
  }
  100% {
    /* Stilovi na kraju animacije */
    transform: translateX(0);
  }
}
Primjer @keyframes:
.animated-box {
  animation-name: moveAround;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes moveAround {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(200px);
  }
  50% {
    transform: translateX(200px) translateY(100px);
  }
  75% {
    transform: translateX(0) translateY(100px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

Svojstva animacija

animation-name

Određuje ime @keyframes animacije koju želite primijeniti na element. Naziv animacije mora odgovarati nazivu definiranom u @keyframes pravilu.

.element {
  animation-name: moveAround;
}

Može se postaviti i na none za uklanjanje animacije.

animation-duration

Definira koliko dugo traje jedan ciklus animacije. Izražava se u sekundama (s) ili milisekundama (ms).

.element {
  animation-duration: 3s; /* 3 sekunde */
}

Zadana vrijednost je 0s, što znači da se animacija neće reproducirati.

animation-delay

Određuje vrijeme čekanja između učitavanja elementa i početka animacije. Može biti u sekundama (s) ili milisekundama (ms).

.element {
  animation-delay: 2s; /* Čekanje 2 sekunde prije početka */
}

Negativne vrijednosti dopuštene su i uzrokuju da animacija počne kao da je već bila u tijeku.

animation-iteration-count

Definira koliko puta će se animacija ponoviti. Može biti broj ili infinite za beskonačno ponavljanje.

.element {
  animation-iteration-count: 3; /* Ponavlja se 3 puta */
}

.infinite-element {
  animation-iteration-count: infinite; /* Beskonačno ponavljanje */
}

animation-direction

Određuje trebali animacija ići naprijed, nazad ili izmjenjivati između naprijed i nazad.

.element {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}
Primjeri smjera animacije:

normal

reverse

alternate

alternate-reverse

animation-timing-function

Kontrolira brzinu animacije tijekom trajanja. Definira kako se vrijednosti izračunavaju između keyframe-ova.

.element {
  animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
}
Primjeri timing funkcija:

ease

linear

ease-in

ease-out

ease-in-out

animation-fill-mode

Određuje koji stilovi se primjenjuju na element kad animacija nije u tijeku (prije početka, nakon završetka ili oboje).

.element {
  animation-fill-mode: none | forwards | backwards | both;
}
Primjeri fill-mode (kliknite za ponovno pokretanje):

none

forwards

backwards

both

Praktični primjeri CSS animacija

CSS animacije mogu se koristiti za razne efekte na web stranicama: