{"id":44774,"date":"2018-05-28T21:01:27","date_gmt":"2018-05-28T13:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=44774"},"modified":"2022-07-15T17:06:35","modified_gmt":"2022-07-15T09:06:35","slug":"wicked-css-animations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/wicked-css-animations\/","title":{"rendered":"Wicked CSS – A Hot New Animation Library in Pure CSS3"},"content":{"rendered":"

Thanks to CSS3 you can build some crazy animations on the web. These can work across all browsers and page elements<\/strong> to control navigation items, dropdowns, tabs, you name it.<\/p>\n

In fact you can even generate these codes dynamically using animation tools<\/a>. But those are quite limited compared to a fully-fledged animation library.<\/p>\n

Wicked CSS<\/a> is the newest library of its kind. This reminds me of the early Animate.css which was fairly simple and rudimentary<\/strong>, yet could be used in pretty much any website.<\/p>\n

Read Also:<\/strong> 30 Cool CSS Animations You Have To See<\/a><\/p>\n

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<\/strong> and pulsing\/bouncing effects.<\/p>\n

\"wickedcss<\/a><\/figure>\n

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<\/a> targeting specific page elements.<\/p>\n

But you can also use this to show (or hide) extra page items<\/strong> like dropdown menus, search bars, hidden signup forms or anything else. Here\u2019s a small list of animations you can pick from:<\/p>\n