How to use Transitions in CSS3

So CSS3 is getting a lot of hype right now & I've been playing around with a few new features, One of them being CSS Transitions. As you can probably tell from the name it's a way to animate between an "on" state and an "off" state. Now this will only work in Safari but has a nice fall-back for other browsers(which we'll talk about).

How to use it

Like most new properties in CSS3 it uses a browser extension Ex: -moz-box-shadow.

a { color: #999; -webkit-transition: color 0.3s linear; }
a:hover { color: #000; }

At first, it was a little confusing but I'm used to it now. First, you declare what property you want to animate between, the amount of time it will take to go from "off" to "on", & the easing. If you're familiar with After Effects, easing will make much more sense to you at first. If you aren't, all it is, is the interpolation between the two points(It'll go fast then ease into the "on" state or visa-versa). The other properties you can pass into it are ease-in, & ease-out.

The nice thing about using this is that it has a really nice fall-back for older browsers or browsers that us not support it. It just does a hard change from "off" to "on". Not a big deal but you just don't get that extra level of niceness.

Post a Comment

Going Up?