15 świetnych bibliotek animacji CSS, które warto znać

Przejścia z jednej konfiguracji stylów CSS do drugiej można animować za pomocą animacji CSS. Na animację CSS składa się styl, który ją opisuje, oraz zestaw klatek kluczowych wskazujących stan początkowy i końcowy, a także ewentualne punkty pośrednie.

Animacje CSS mają trzy główne przewagi nad tradycyjnymi technikami animacji opartymi na skryptach:

1. Przy prostych animacjach są proste w użyciu, do ich zrobienia nie trzeba nawet znać JavaScriptu.
2. Nawet przy umiarkowanym obciążeniu systemu działają dobrze. W JavaScripcie proste animacje często kuleją. Żeby zachować jak największą płynność, silnik renderujący może pomijać klatki i sięgać po inne rozwiązania.
3. Oddanie przeglądarce kontroli nad sekwencją animacji pozwala jej poprawić wydajność i oszczędność zasobów, na przykład przez ograniczenie częstotliwości odświeżania animacji w kartach, które akurat nie są widoczne.

Choć większość animacji da się zrobić czystym CSS-em, biblioteki i frameworki animacyjne pozwalają uzyskać lepszy efekt w krótszym czasie.

1️⃣ Animate.css – animacje CSS autorstwa Daniela Edena

2️⃣ Anime.js – lekka biblioteka animacji w JavaScripcie, z prostym, ale mocnym API. Działa z właściwościami CSS, SVG, atrybutami DOM i obiektami JavaScriptu.

3️⃣ CSShake – CSShake daje dokładnie to, co obiecuje nazwa – bibliotekę CSS stworzoną po to, żeby trząść elementami strony.

4️⃣ Hover.css – biblioteka animacji CSS pomyślana pod przyciski i inne elementy interfejsu na stronie.

5️⃣ AniJS – biblioteka animacji, która pozwala dopiąć animację do elementu w prostym zapisie przypominającym zdanie.

6️⃣ Animista – animacje CSS na żądanie

7️⃣ Tachyons Animate – Tachyons to atomowa biblioteka CSS wypełniona klasami użytkowymi: projektujesz cokolwiek, dokładając te klasy, których akurat potrzebujesz.

8️⃣ Sequence.js – biblioteka JavaScriptu dająca responsywny framework CSS do budowania sliderów, prezentacji, banerów i innych interfejsów krokowych.

9️⃣ Infinite – animacje w rodzaju obrotów i pulsowania, zaprojektowane tak, żeby działać i powtarzać się w nieskończoność.

🔟 OBNOXIOUS.CSS – animacje dla mocnych duchem i słabych na umyśle

1️⃣1️⃣ MOTION UI – biblioteka Sass do tworzenia elastycznych przejść i animacji CSS.

1️⃣2️⃣ Keyframes.app – graficzny interfejs do generowania własnych animacji CSS na klatkach kluczowych.

1️⃣3️⃣ AnimXYZ – pomaga tworzyć, dostosowywać i składać animacje na stronę. Przygotowany pod Vue, React, SCSS i CSS.

1️⃣4️⃣ Whirl – animacje ładowania w CSS minimalnym nakładem pracy!

1️⃣5️⃣ Hamburgers – kolekcja smakowitych, animowanych w CSS ikon hamburgera. Źródła są dostępne również jako biblioteka Sass. Wszystko jest modułowe i konfigurowalne, więc usmaż własnego hamburgera.