Animate.css je CSS knjižnica, ki definira kup animacij, ki jih lahko potem uporabimo nad elementom. Vedno mi je bila všeč spletna stran, ki je ob naložitvi izvedla kakšno animacijo postavitev HTML gradnikov. Menim tudi, da si tak “pompozen” prihod uporabnik zapomni.
Spodaj je primer animacije elementa span, ki bo ob obisku spletne strani pridrsal od zgoraj.
<span class="animated slideInDown">Animate.css primer</span>
Ključna beseda animated je obvezna, saj gre za nekakšen imenski prostor. Beseda slideInDown pa pove, katera animacija naj se izvede (v tem primeru pridrsanje od zgoraj). Animacije ((Če za razvoj spletnih strani uporabljate Sublime Text, potem lahko seznam vseh animacij (razredov) dobite tako, da v knižnici animate.css pritisnete CTRL+P in vtipkate “@.”)) iz Animate.css lahko razdelimo v več skupin:
- animacije za iskanje pozornosti (npr. tresenje na mestu),
- vstopne animacije (kot npr. zgoraj predstavljena),
- izstopne animacije (obratna od vstopne animacije).
Animacije so lahko tudi neskončne (npr. animated infinite pulse).
Primer uporabe knjižnice Animate.css, kjer sem dodal še zakasnitev animacije ter animiranje elementov takrat, ko je slednji v vidnem polju (s pomočjo dodatka za jQuery viewportChecker.js). Čeprav sem pozneje ugotovil, da to ponuja že WOW.js.