Site icon Sir Codex

Easy CSS3 Animation with Animate.css

Sir Codex
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.

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

Source Link: http://www.sitepoint.com/animate-css-css3-animation/

Exit mobile version