CSS animacije lahko na prvi pogled delujejo precej zapleteno, v sami osnovi pa jih sestavljajo precej enostavni elementi, in sicer: ime animacije, keyframes in želena animacija.

Ustvarjanje CSS animacij je tako v praksi precej preprosto in ga lahko razdelimo na dva koraka:

1. Definiranje animacije
2. Dodelitev animacije HTML elementu/om

Definiranje animacije

Za definiranje CSS animacije potrebujemo pravila @keyframes in ime animacije, ki ga bomo kasneje uporabljali oz. naslavljali. Za primer, če želimo pripraviti animacijo, ki premika objekt iz enega konca na drugega lahko animacijo poimenujemo “premikanje”, naše pravilo @keyframe pa bo izgledalo:

@keyframes premikanje {}

@keyframes pravilu moramo dodati še samo animacijo oz. želen učinek. CSS animacije lahko definiramo na dva načina, in sicer “from” in “to” ali pa s pomočjo procentov. V našem primeru premikanje je primernejši način “from” in “to”. Ta način premikanja je precej enostaven, že samo ime nam izda, da gre za premikanje iz ene točke v drugo. Za naš primer bomo uporabili premikanje po osi x, naše pravilo @keyframes pa je naslednje:

@keyframes premikanje {
from {transform: translateX(0);}
to {transform: translateX(400px);}
}

Za primere, ko želimo imeti več animacij, kot le premikanje iz točke A v točko B je potrebno uporabiti procente, ki so veliko bolj priročni. Na voljo imamo vrednosti od 0% do 100%. Primer našega pravila premikanja v procentih :

@keyframes premikanje {
0% {transform: translateX(0);}
100% {transform: translateX(400px);}
}

Dodelitev animacije HTML elementu/om

Za dodelitev animacije HTML elementu/om preprosto določimo kateri @keyframe želimo imeti – “animation-name” in čas izvajanje animacije – animation-duration”.

.objekt {
animation-name: premikanje;
animation-duration: 2s;
}

Dodatne nastavitve pri animacijah

Pri CSS animacijah nam pridejo prav še dodatne nastavitve, kot so “animation-timing-function” za način premikanja (enakomirno, pospešeno, …), “animation-iteration-count” za število ponovitev in “animation-fill-mode” za določanje stanja po animacij oz. ko animacija ne igra.

.objekt {
animation-name: premikanje;
animation-duration: 2s;

animation-timing-function: ease-in;
animation-iteration-count: 50;
animation-fill-mode: forwards;
}

Primer naše CSS animacije si lahko ogledate na spodaj.

See the Pen dYXwYg by Ziga (@pomagalnik) on CodePen.

CSS animacije so danes že zelo dobro podprte v različnih brkalnikih, zato jih lahko pri svojih projektih že pridno uporabljamo. Običajno jih zasledimo pri različnih interaktivnih elementih, kot so gumbi, obvestila, različne akcije, … Pri uporabi CSS animacij pa moramo biti previdni, saj preveč animacij moti naše uporabnike pri uporabi, upočasnuje delovanje naprav in po ne potrebnem daljša čas oz. krade čas našim uporabnikom, zato jih uporabljajte premišljeno.