Wicked CSS - gorąca nowa biblioteka animacji w czystym CSS3
Dzięki CSS3 możesz budować szalone animacje w sieci. Te mogą działać we wszystkich przeglądarkach i elementach strony aby kontrolować elementy nawigacji, listy rozwijane, karty, nazwij je.
W rzeczywistości możesz nawet generować te kody dynamicznie za pomocą narzędzi do animacji. Ale są one dość ograniczone w porównaniu z pełnoprawną biblioteką animacji.
Wicked CSS to najnowsza biblioteka tego typu. To przypomina mi wczesne Animate.css, który był dość prosty i prymitywny, jednak może być używany w prawie każdej witrynie.
Rzuć okiem na stronę główną, aby zobaczyć demo na żywo wraz z listą wszystkich obsługiwanych animacji. Od czasu pisania tego artykułu liczę 24 stylów animacji od slajdów do rotacji i efekty pulsujące / odbijające.
Wiele z tych animacji to jednorazowe funkcje używane do wyświetlania elementu (lub niewidoczne). Jest to przydatne dla stron z animacjami przewijania do widoku skierowanymi na określone elementy strony.
Ale ty też możesz użyj tego, aby pokazać (lub ukryć) dodatkowe elementy strony jak menu rozwijane, paski wyszukiwania, ukryte formularze rejestracyjne lub cokolwiek innego. Oto mała lista animacji, które możesz wybrać:
- Wstrząsać
- Powiększ / pomniejsz
- Przesuń w górę / w dół
- Wejdź / wyjdź
- Rolling in / out
- Odbij i pop
- Okrągły obrót do wewnątrz / na zewnątrz
Wszystkie te style animacji są przeznaczone do jednorazowego użytku. Mogą być wywoływane wiele razy na stronę i na element, ale nie są to powtarzające się animacje.
Zamiast tego użyjesz ich w oparciu o efekt kliknięcia, najechania lub przeciągnięcia użytkownika. Mogą być również używane w przyciskach CTA do efektów pulsujących / pulsujących, ale wymaga to funkcji synchronizacji JavaScript.
Spójrz na stronę przykładów, aby uzyskać podgląd na żywo i więcej szczegółów. Pełną dokumentację znajdziesz także na głównej stronie wraz z repozytorium GitHub.
Wicked CSS jest nowszą biblioteką, więc nie ma jeszcze wielkich następstw. Ale biblioteka jest stabilna i prawdopodobnie będzie istniała przez wiele lat.
