theChrisWalker.net

I recently read somewhere about developing web applications for the iPhone / Android browsers that you shouldn’t use Javascript Frameworks (e.g. jQuery) for animation in your web apps but instead use CSS3 transitions. I had no idea what these where, so had to look it up. Turns out it’s pretty much a WebKit only thing, but that’s fine for iPhone (Safari) and Android (Chrome) Browsers.

But what is it? Simply put, it’s a way to create a transition between to CSS states (hope that cleared everything up for you!)

Better, an example: You have two CSS rules for an element, say a link, and for it’s :hover state. like this:

Now usually, the browser would switch instantly between these two states, but with transitions we can slow it down into a smooth animation.

We can specify which propertys to transition and which to allow to change instantly. Here we can transition in the background and color properties.

Here’s two links, the they are identical except that the second has the transisions applied and if you’re using a WebKit based browser then it will fade nicely between states.

I will flick between states. Do I fade or do I flick?

Next time I’ll go into a bit more detail and show how using CSS Transforms as well we can make an OSX Dock style menu using CSS alone!