Go nuts with CSS3 hover effects

It seems that many commenters are missing the value of a demo combining effects in new ways, presented in a new context.

There are many app experiences beyond simple navigation that ask for and respond to actions/events - many would benefit greatly by expressive animation. I agree the effects shown are more distracting than useful, but this isn't a CSS template for folks to copypaste. It's inspiration to experiment and discover the subtle, sophisticated, delightful details that make your app feel alive and exciting without going so far that it becomes a whirling and twirling abomination.

Use some design judgement. Don't sniff at the tech demo for being a tech demo.

Animation is not at all mutually exclusive of good usability. Usable animation makes state transitions clear to users in ways instant transitions never could.

The perennial example is iOS: Almost all of the animation is there to guide the user through what's happening when the state changes. Left/right transitions make view hierarchies intuitive to follow. Expand/contract animations spatially establish the home screen as the very top level. It's subtle at times, but the animation in iOS is almost never decorative; it's only "fun" because it builds and reinforces the user's mental model of what they're navigating, making them feel in control.

You said it yourself - you want the controls to _fade_ into the background.

A fade is a very simple animation to communicate what's happening, but the details of duration and exponential vs linear transition can make a simple fade seem frantic, soothing, or even invisible. When you say "fade into the background", I assume you mean a linear animation that takes about 1 second. It's pretty awesome that the world has a very specific fade that serves as a "word" in our shared design language.

Interactions are filled with interstitials and microstates, but a fade isn't really appropriate for all of them. While we try to figure them out, some folks will make animations that remind us of geocities - but others are going to express actions with animations that seem so natural we can't help but describe the action as the animation. Just as you did.

And then our shared design language will have a new word.

on demo6, if you move the mouse fast over them... my CPU gets as hammered as if it were flash.

Does anyone else get a flash of black over the whole page once in a while during the transitions?