Article Description

Transitions and CSS animations can help make websites friendlier, but their movement can be mechanical and somewhat unrealistic if not handled well. Website designer/developer Steven Bradley shows how designers can take a cue from the animators at Disney and the 12 principles of animation they follow, and apply to all their work.

From the author of

Exaggeration

Oddly enough, to make animations appear more realistic, you have to exaggerate them. If animation tries to mimic reality too closely, it tends to appear stiff and lifeless.

Exaggeration is often used to accent actions and emotions. A ball might squash and stretch more than it should. A cartoon windup before throwing a ball is usually shown as the arm spinning like a propeller in the opposite direction of the throw itself.

You don’t want to exaggerate everything. Use restraint. Exaggerate to add a little more life and excitement but not so much to completely destroy believability.