CSS Animacija

Prvi korak u korišćenju animacije u CSS-u je svojstvo prelaza. Kada predefinisani prelazi nisu dovoljni ili jednostavno nisu pogodni, postoji CSS animacija.

Napomena: U ovom postu se ne koristi JavaScript! (čak i ja verujem da je ovo jasno)

Svojstvo animacije ima 2 dela: ključni okviri i svojstvo animacije. Ključni okviri definišu faze i stilove animacije i svojstvo animacije dodeljuje ključne okvire elementu i određuju kako će se animacija izvoditi na definisanom elementu.

Ključni okviri

Definisanjem ključnih okvira zapravo postavljate korake za svoju animaciju. Sintaksa za ovaj deo animacije je reč @keframes praćena nazivom animacije praćenim selektorima ključnog okvira i njegovim stilom.

 @keyframes animation-name{
     0%{CSS}
     50%{CSS}
     100%{CSS}
 }

Animacija se kreira postepenim prelaskom iz jednog u drugi stil koji postavljaju selektori ključnih okvira. Ovi selektori mogu imati vrednost 0% -100% (ili reči „from“ i „to“ koje znače 0% i 100%). Verujem da je savršeno jasno da 0% predstavlja početak animacije, a 100% kraj.

Svojstva koja možete animirati nisu beskonačna, pa postoji njihova lista.

Sada, najšokantnija stvar oko opcije @keiframes:
!important u CSS-u unutar ključnih okvira ne samo da čini vaš kod važnim, već takođe zanemaruje celu liniju koda ...!

Svojstvo animacije

Jednom kada se definišu ključni kadrovi, bolje se uverite da se rad isplati i koristite ih. Unutar selektora koji želite da animirate dodajte svojstvo animation. Ovo svojstvo je skraćenica za osam svojstava animacije.

animation
 =
 animation-name
 animation-duration
 animation-timing-function
 animation-delay
 animation-iteration-count
 animation-direction
 animation-fill-mode
 animation-play-state

Glavna svojstva koja treba dodati su animation-name i animation-duration. Bez anotation-name ne možete povezati animaciju sa ključnim kadrovima, a bez animation-duration trajanje će biti postavljeno na 0 i opet, nema animacije.

Ostala svojstva se koriste za bolje definisanje animacije. Animation-timing-function određuje krivu brzine animacije. Može se definisati unapred definisanim vrednostima (inear, ease, ease-in, ease-out, ease-in-out) ili prilagođeno definisati sa koracima ili kubnim-bezijerovim vrednostima.

Svojstvo animation-delay radi prilično isto kao u tranziciji - definiše početak animacije.

Animacija će se podrazumevano reprodukovati jednom. Pomoću animation-iteration-count možete ga promeniti u bilo koji broj ili ga definisati kao infinite.

Svojstvo animation-direction određuje ciklus animacije - da li će se reprodukovati unapred, unazad ili u alternativnim ciklusima. Opcije koje definišu ta stanja su normal, reverse, alternate (napred pa nazad) i alternate-reverse (unazad pa napred).

Svojstvo animation-fill-mode definiše stil elementa kada se animacija završava ili pre nego što je započela. Podrazumevano stanje je none i u ovom stanju animacija neće primeniti bilo koji stil na animirani element. Opcija both će postaviti prvu vrednost ključnog okvira elementu dok ne započne, a poslednju vrednost ključnog okvira nakon završetka. Opcije forwards i backwards definisane su odvojene opcije both.

I na kraju, sa animation-play-state možete animaciju pauzirati i reprodukovati ponovo. Dakle, ima 2 opcije, running (što je podrazumevano) i paused.

Čak je i svojstvo animation skraćenica za sve navedene opcije, uobičajeno je da se koristi odvojeno za animation-name i animation-duration i odvojeno za listu drugih svojstava

 animation: icon-animation 2s;
 animation-timing-function:ease;
 animation-delay: 5s;
 animation-iteration-count:infinite;
 animation-direction:normal;
 animation-fill-mode:both;
 animation-play-state:running;

Samo za zapis, elementu je moguće dodati više animacija.

I samo kratka napomena o prefiksima: sa svim svojstvima animacije i ključnim okvirima treba da koristite -webkit-. Za nekoliko specifičnih poznatih problema proverite CanIUse.

Primeri

Animacija za sebe zapravo nije stvar koja ima određenu svrhu u dizajnu. S druge strane, može se koristiti bilo gde i uvek će dodati vrednost. Reći ću da se specifična animacija (definisana ovim svojstvom) najviše koristi za specijalne efekte, a animacija definisana prelazom koristi se za češće elemente poput lebdenja i drugih stanja.

Takođe, neki efekti na efekat lebdenja, čak i samo linija sa neobičnim ponašanjem definišu se svojstvom animacije.

Dakle, ako trebate da dodate „ono nešto“ svom već gotovom dizajnu, dodajte poseban efekat u pozadini ili na neke određene elemente (loader, scroll, hover ...).

Lep blog sa mnogo lepšim postom sa najlepšim primerima CSS animacije: https://www.creativebloq.com/inspiration/css-animation-examples.

Takođe, obavezno proverite Animista gde ima puno unapred definisanih animacija koje lako možete koristiti.

Epilog

Svojstvo animacije je, po mom mišljenju, jedno od najviših svojstava CSS-a, ako ne zbog vau efekta, potrebno vam je za vaš „glavni CSS“ cilja. Ako ste zainteresovani za UX (ako ne, možda biste trebali), pogledajte veoma lep tekst o animaciji od tima Invisionapp.

Za redovan protok CSS-a u vašem sandučetu pretplatite se na naš bilten.