5 CSS Effects Libraries for Supercharging Your Designs

Posted: 09 Apr 2014 03:00 AM PDT

CSS3 gives designers many new properties and modules (like the CSS Animations and CSS Transitions modules) that allow them to add fascinating interactivity onto their work.

If you want to take advantage of these modern CSS capabilities, one quick way to do that would be to use (or study) CSS effects libraries. Let me talk about a few open source collections of CSS that will help you craft great transitional interfaces.

1. Animate.css

Animate.css is a collection of over 60 CSS effects by Daniel Eden, a designer at Dropbox. Daniel Eden’s work on Animate.css is an inspiration to some of the other CSS effects libraries below.

2. Hover.css

This is a huge collection of 48 CSS3 hover effects by front-end developer, Ian Lunn. What’s cool about Hover.css is it comes with a SASS version, which is really, really handy for a whole lot of us.

License: MIT
Demo
Docs (tutorial)
Download from GitHub

3. fancyInput

fancyInput deals specifically with interactions related to your HTML <input> and <textarea> elements. It gives you the ability to implement interesting CSS effects when users type into your form fields.

License: Unknown
Demo
Docs
Download from GitHub

4. magic

(Note: The link above goes to an Italian-language website.)

magic is an interesting collection of CSS3 effects. The magic project is inspired by Daniel Eden’s work on Animate.css and is by an Italian developer who goes by the moniker, miniMAC.

With magic, you can easily trigger CSS animations and transitions using jQuery (or your preferred JavaScript front-end web development framework) simply by setting event listeners on your target HTML objects and then adding/removing the magic-specific CSS animation classes when the event occurs.

For example, say we have a button called #submit-button and we wanted to remove it from the DOM — which is a design pattern for critical interactions where you don’t want users to keep clicking on a button that’s intended to be pressed only once — but we wanted to do it in an impressive, transitional way to make sure the user doesn’t get confused and left wondering where the button went, all we would need to do is this (using jQuery):

  $('#submit-button').click(function(){    $(this).addClass('magictime vanishOut')  });

License: Unknown
Demo [Has looping background audio]
Docs
Download from GitHub

5. Effeckt.css

Effeckt.css — which is still a work in progress — is a Mobile First library of animation and transition CSS effects. The effects included are contributed and curated by designers to make sure they’re tasteful. Effeckt.css strongly emphasizes on performance, one criteria being if it can’t run well at 60fps on mobile devices, it’s out. Read the 9 goals of Effeckt.css and watch the project’s 22-second video on YouTube to get a glimpse of Effeckt.css’s future.

This isn’t an exhaustive list of CSS effects libraries. I’m sure I’ve missed some equally great projects out there. If you know of an open source project that should’ve been on this list, or if you’re working on one, please share it with us in the comments. Thanks!

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.