With CSS transitions now supported in Safari, Google Chrome, Opera and Firefox 4 Beta, transitions are a great way to enrich the user experience in your web designs. Like any effect used in a design, transitions are best when used in subtle ways that don’t get in the way of the user.
If you don’t know what CSS transitions are, there are lots of great articles out there on the technical details of what they are and how to use them. In this post however, we’ll look at how they can be used to make the users experience of your web site more interactive and memorable.
A good place to start is smoothing out any changes in style you already have on your site that react to user interaction. For example, links or buttons that change colour on hover. You’ll probably want to keep these transitions short though, so the change in state is quickly noticeable.
Another great place to use transitions is to replace effects you may be creating using JavaScript. You could easily replace effects like fading, sliding and transitioning between colours. While this won’t add any extra value to your design as far as interaction goes, since you’re just changing the implementation, you might be able to do without that animation library which means smaller file sizes for the user. And for IE, which doesn’t yet support transitions, conditional tags could be used to fall back to your JavaScript effects.
Possibly the best place to use transitions is in mimicking real world metaphors. The best example of this would be pushing a button. While we could just have an active state for a button, styled as a sunken, pushed state of a button, having the button smoothly transition into that state adds a much richer, tactile experience.
While it’s lots of fun to start adding transitions all over your site, keep in mind that too many can be distracting. It’s also best to keep transition timing quick unless you’re going for a specific effect, or they can quickly make your web site feel gimmicky.
About Joel
