Wicked CSS – A Hot New Animation Library in Pure CSS3
Thanks to CSS3 you can build some crazy animations on the web. These can work across all browsers and page elements to control navigation items, dropdowns, tabs, you name it.
In fact you can even generate these codes dynamically using animation tools. But those are quite limited compared to a fully-fledged animation library.
Wicked CSS is the newest library of its kind. This reminds me of the early Animate.css which was fairly simple and rudimentary, yet could be used in pretty much any website.
Read Also: 30 Cool CSS Animations You Have To See
Take a peek at the homepage for a live demo along with a list of all supported animations. As of writing this article I count 24 total animation styles from slides to rotations and pulsing/bouncing effects.
Many of these animations are one-off features used to bring an element into view (or out of view). This is handy for pages with scroll-to-view animations targeting specific page elements.
But you can also use this to show (or hide) extra page items like dropdown menus, search bars, hidden signup forms or anything else. Here’s a small list of animations you can pick from:
- Shake
- Zoom in/out
- Slide up/down
- Fade in/out
- Rolling in/out
- Bounce and pop
- Circular rotation in/out
All of these animation styles are designed for one single use. They can be called multiple times per page and per element, but these are not repeating animations.
Instead you’ll use these based on a user’s click, hover, or swipe effect. They can also be used on CTA buttons for pulsing/throbbing effects, but that does require a JavaScript timing function.
Take a look at the examples page for a live preview and some more details. You’ll also find full documentation on the main site along with the GitHub repo.
Wicked CSS is a newer library so it doesn’t have a huge following yet. But the library is stable and it’s likely to be around for years to come.