Easy CSS3 Animation with Animate.css

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.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.xaviermedia.com Andreas

    An example on how it could look would be great (I don’t want to have to do an animation myself to figure out if it’s worth the time or not ;-)

    /A

    • http://www.optimalworks.net/ Craig Buckler

      That’s exactly what Animate.css gives you. Try it!

  • Jason

    CSS animations. Another thing to turn off while browsing.

  • Pål Nes

    -webkit-, the new filter-property.

  • max

    Amazing. None of the Animate.css examples work in IE…even IE9.

  • http:pushinpixels.co.uk Paul

    Great work and fanatastic site Dan, I briefly experimented with css3 animations on my site but you have given us all a go to site for code snippets.

  • http://twitter.com/benah254 Ben

    Awesome article. i thought animations were only done by using jquery. this is much simpler and effective too.