Keen to Tween

An introduction to animation on the web and why you should use it.

Web is not print. I’m sure the most vigilant of you have already spotted this. Yet we have treated it as such for a long time. It’s only in the last few years that web has started to show its true colours and the potential direction in which it’s heading. The lift-off of HTML5 and CSS3 has opened new windows to web designers and developers to produce more beautiful interactive experiences that enrich a users interactions with websites.

Web is not Disney. Again, pretty sure that you chaps have worked that out too. Yet thanks to programs such as Flash we naively skipped merrily down the garden path toward a utopia of stick man death, and dress up dolls. A land where anyone with Windows XP and a hooky copy of Flash 8 could produce a website. Thankfully we (and Apple) saw the light and diverted us away.

So here we are, sitting in the beautiful middle between static parchment and animated malarkey.

Enough Waffling, What is CSS3 Animation?

In brief, CSS3 animations allow us to animate the styles we give to content on your site. There is no code in this article, if your looking for a tutorial head over to Rich Bradshaw’s great tutorial site.

Support wise, you’re looking at good coverage for all modern browsers and IE 10+. For a full reference to all supporting browsers see the W3C site. Obviously, as with any new web technology, ensure that what you use it on degrades elegantly, or enhances fantastically (whatever floats your canoe).

Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted.
— Google —

Why use css3 animation?

CSS3 animations provide an additional level of user interaction. When used sparingly it can produce a smooth and sophisticated experience. It can aid a user in focusing their attention on key content areas as well as provide a visual clue as to where you want to lead them next (and no, I’m not talking about a big flashing button). Cleverly choreographed animations give the user positive feedback to their actions and allow them to feel confident enough to explore further.

Animations can also allow you to emphasise your page hierarchy, bringing in key content first and subliminally catching a users eye. This improves the users understanding and experience of the interaction. The subtle appearance of page elements can map a users path though your page.

Motion design should not only be beautiful, but serve a functional purpose.
— Google —

A purpose — animation for the sake of animation only adds unnecessary noise to what can already be a busy and complicated experience.

When not to use css3 animation

“Just because I could — I found this great jQuery plugin, and I just wanged it into the site because it looked cool” — No, the animations must bring a benefit to the user. The spinning logo might look great to you, and that flashing button might catch the eye, but in terms of accessibility and overall good taste, they are a terrible, terrible idea.

Target Audience — Or in the words of my Studio Manager “have you thought about your target audience?” Are the people who are going to use your site actually going to benefit from it? If you’re creating a utilitarian webapp which focuses purely on content, and an IT boffin called Paul is going to be the only one using it, this is potentially a great opportunity to leave the tweens in their box.

Browser Support — Although support is OK it’s still not fantastic. If your end users are going to be stuck on IE6 because of company policy then again animation is not for you.

The future

So what is the future for animation of the web? It’s all looking very bright. Just peruse Themeforest and you’ll see the extent of the current fad for CSS animation. Admittedly these themes do take the use of animation to the extreme, and I’m sure it’ll die down within the next few years, but it shows that people are using the technology successfully and finding the “best fit” for animations on the web.

In the next few years I see the mergence of Apps and websites. And before you get all shirty, yes I know we have WebApps already — I’m talking about all sites. Static content sites which are currently stuck in the age of print being brought into the beautiful middle, where sophisticated, subtle animations improves a users understanding, experience and enjoyment of consuming content.

For a fantastic overview of how you can use animation to improve your website take a look at the responsive interaction section of Googles new brand guidelines.