Despite my initial reservations over whether animations should be defined in CSS, I have to admit they’re very useful, faster and slicker than equivalent effects in JavaScript. Building great animations isn’t easy, though — it involves a lot of patience, trial, error, testing and vendor-prefix shenanigans.

Animate.css makes coding a little more bearable. Simply choose an effect, watch it in action, download the code and add a couple of classes to your HTML element. You can either download the full 2,500 line CSS file or create a custom build using the effects you need.

Animate.css was developed by Dan Eden, a designer and student based in Manchester, UK:

I was working on a few personal projects with CSS3 animation keyframes and found myself repeating code. So I began creating a library of animations I could drop in at will. After I’d made something I was happy with, I released the code on GitHub and it took off from there.

People love animations!

We certainly do. My current favorite is “hinge” in the Specials section at the bottom. Very cool. I’m struggling to think of a use-case, but may apply it to all my links from now on!

The Prefix Predicament

While prefixes may be a necessary evil, Animate.css illustrates just how clunky they can be. Keyframes and their associated transformation properties must be defined with -webkit, -moz, -ms, -o and non-prefixed values. It results in a lot of browser-specific repeated code which is difficult to maintain and debug, e.g.

@-webkit-keyframes rollIn {
	0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollIn {
	0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-ms-keyframes rollIn {
	0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollIn {
	0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
	0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

CSS pre-parsers can ease the situation, but they’re not for everyone and the projects must be kept up to date as CSS3 evolves. I’m rapidly coming to the conclusion that Florian Rivoal’s suggestion of unprefixed properties being supported from day one is a good move.

For the moment, however, Animate.css is a great option if you want a couple of quick effects without doing the dirty work yourself.

Learn Responsive Web Design

• SitePoint's ebook: Jump Start Responsive Web Design
• Responsive Web Design: Key Concepts online course
• Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

Tagged as: CSS, CSS3, HTML5 Dev Center, vendor prefixes