CSS Animacije

Vodič kroz CSS animacije i njihova svojstva

Što su CSS animacije?

CSS animacije omogućuju animiranje HTML elemenata bez korištenja JavaScripta. Pomoću njih možemo stvoriti složene i glatke animacije koje se mogu ponavljati, pauzirati i kontrolirati.

@keyframes

@keyframes definira sekvencu animacije kroz različite korake. Određuje kako se element treba animirati u određenim trenucima.

@keyframes primjer {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

animation-name

Određuje ime @keyframes animacije koja će se primijeniti na element.

animation-name: primjer;

animation-duration

Definira koliko dugo traje jedan ciklus animacije.

animation-duration: 2s;

animation-delay

Određuje vrijeme čekanja prije početka animacije.

animation-delay: 1s;

animation-iteration-count

Određuje koliko puta će se animacija ponoviti.

animation-iteration-count: infinite;

animation-direction

Određuje treba li se animacija izvoditi unaprijed, unazad ili naizmjenično.

animation-direction: alternate;

animation-timing-function

Određuje brzinu izvođenja animacije tijekom trajanja.

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

animation-fill-mode

Definira koje vrijednosti se primjenjuju prije i nakon animacije.

animation-fill-mode: forwards;

animation (shorthand)

Skraćeni zapis za sve animation svojstva u jednoj liniji.

animation: primjer 2s ease-in-out infinite;