Wicked CSS – A Hot New Animation Library in Pure CSS3

Thanks to CSS3 we can build some crazy animations on a web. These can work opposite all browsers and page elements to control navigation items, dropdowns, tabs, we name it.

In fact we can even beget these codes boldly regulating animation tools. But those are utterly singular compared to a fully-fledged animation library.

Wicked CSS is a newest library of a kind. This reminds me of a early Animate.css that was sincerely elementary and rudimentary, nonetheless could be used in flattering most any website.

Take a demeanour during a homepage for a live demo along with a list of all upheld animations. As of essay this essay we count 24 sum animation styles from slides to rotations and pulsing/bouncing effects.

wickedcss homepagewickedcss homepage

Many of these animations are one-off facilities used to move an component into perspective (or out of view). This is accessible for pages with scroll-to-view animations targeting specific page elements.

But we can also use this to uncover (or hide) additional page items like dropdown menus, hunt bars, dark signup forms or anything else. Here’s a tiny list of animations we can collect from:

  • Shake
  • Zoom in/out
  • Slide up/down
  • Fade in/out
  • Rolling in/out
  • Bounce and pop
  • Circular revolution in/out

All of these animation styles are designed for one singular use. They can be called mixed times per page and per element, though these are not repeating animations.

Instead you’ll use these formed on a user’s click, hover, or appropriate effect. They can also be used on CTA buttons for pulsing/throbbing effects, though that does need a JavaScript timing function.

wickedcss instance pagewickedcss instance page

Take a demeanour during the examples page for a live preview and some some-more details. You’ll also find full support on the categorical site along with a GitHub repo.

Wicked CSS is a newer library so it doesn’t have a outrageous following yet. But a library is fast and it’s expected to be around for years to come.

Add Comment