Animacija omogućuje da se element postupno mijenja iz jednog u drugi stil.

Možete promijeniti koliko CSS svojstava želite i onoliko puta koliko želite.

Da biste koristili CSS animaciju, prvo morate navesti neke ključne okvire za animaciju.

Keyframes određuje kakve će stilove element imati u određenim trenucima.

Kada odredite CSS stilove unutar pravila @keyframes, animacija će se postupno mijenjati iz trenutnog u novi stil u određenim vremenima.

Da bi animacija djelovala, animaciju morate vezati za element.

Svojstvo usmjerenja animacije određuje treba li animacija igrati naprijed, natrag ili u alternativnim ciklusima.

Svojstvo usmjerenja animacije može imati sljedeće vrijednosti:

• normal - animacija se reproducira kao i normalna (naprijed). Ovo je zadano
• reverse - animacija se reproducira u obrnutom smjeru (unatrag)
• alternate - animacija se prvo reproducira prema naprijed, a zatim naprijed
• alternate-reverse - animacija se prvo reproducira unatrag, a zatim naprijed