5 CSS Effects Libraries for Supercharging Your Designs

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.

• License:MIT
• Demo
• Docs
• Download from GitHub

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.

• License:MIT
• Demo
• Download from GitHub

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!

Related Content

• 8 Ways to Add a Responsive Navigation Menu on Your Site
• 5 Reasons Why Metaphors Can Improve the User Experience
• Mobile UI Design Patterns
• Related categories: Tools and User Interface