@keyframes je pravilo koje omogućuje stvaranje animacija u CSS-u. Definira koje promjene stila će se dogoditi tijekom trajanja animacije.
animation-name označava ime animacije koja je definirana pomoću @keyframes. Ovo ime se koristi u CSS-u da bi se povezala animacija sa elementom.
animation-duration određuje koliko dugo traje animacija, obično u sekundama (s) ili milisekundama (ms).
animation-delay postavlja odgodu prije nego što animacija počne. Vrijednost je također u sekundama (s) ili milisekundama (ms).
animation-iteration-count određuje koliko puta će se animacija ponoviti. Može biti broj ili "infinite" za beskonačno ponavljanje.
animation-direction postavlja smjer animacije. Vrijednosti mogu biti "normal", "reverse", "alternate", ili "alternate-reverse".
animation-timing-function definira brzinu promjena animacije tijekom vremena. Vrijednosti mogu biti "linear", "ease", "ease-in", "ease-out", ili druge funkcije.
animation-fill-mode određuje stanje elementa prije i nakon animacije. Može biti "forwards", "backwards", "both", ili "none".
U sljedećem primjeru vidite animirani kvadrat koji se pomiče s lijeva na desno i natrag.