Wicked CSS - Horká nová animační knihovna v Pure CSS3
Díky CSS3 můžete na webu vytvořit nějaké šílené animace. Ty mohou pracovat ve všech prohlížečích a prvcích stránky Chcete-li ovládat navigační položky, rozevírací seznamy, karty, pojmenujte jej.
Tyto kódy můžete dokonce generovat dynamicky pomocí animačních nástrojů. Ty jsou však ve srovnání s plnohodnotnou knihovnou animací poměrně omezené.
Wicked CSS je nejnovější knihovnou svého druhu. To mi připomíná počátek Animate.css, který byl poměrně jednoduchý a základní, přesto by mohly být použity v téměř jakékoliv webové stránky.
Podívejte se na domovskou stránku živého dema spolu se seznamem všech podporovaných animací. Jak psát tento článek já počítám Celkem 24 animačních stylů od snímků po rotace a pulzující / odrazující efekty.
Mnohé z těchto animací jsou jednorázové funkce, které slouží k zobrazení prvku (nebo z pohledu). To je užitečné pro stránky s animacemi, které zobrazují konkrétní prvky stránky.
Ale můžete také použijte k zobrazení (nebo skrytí) dalších položek stránky jako jsou rozbalovací nabídky, vyhledávací lišty, skryté registrační formuláře nebo cokoli jiného. Zde je malý seznam animací, ze kterých si můžete vybrat:
- Otřást
- Přiblížit / oddálit
- Posuňte nahoru / dolů
- Fade in / out
- Rolling in / out
- Bounce a pop
- Kruhové otáčení in / out
Všechny tyto styly animace jsou určeny pro jediné použití. Mohou být volány vícekrát na stránku a na prvek, ale nejedná se o opakující se animace.
Namísto toho budete používat tyto funkce na základě kliknutí uživatele, přechodu na něj nebo efektu přetažení. Mohou být také použity na tlačítka CTA pro pulzující / pulzující efekty, ale to vyžaduje funkci časování JavaScriptu.
Podívejte se na stránku s ukázkami živého náhledu a další podrobnosti. Kompletní dokumentaci naleznete také na hlavní stránce spolu s repo GitHub.
Wicked CSS je novější knihovna, takže to ještě nemá obrovské pokračování. Knihovna je však stabilní a je pravděpodobné, že bude v příštích letech.
