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

Straight Ahead Action and Pose-to-Pose

Both are methods for creating an animation. In straight ahead action, you would draw everything in frame one and then move on to do the same in frame two. You would continue to draw every frame from first to last in sequence. This method allows animators to explore and discover as they go.

With pose-to-pose, you draw important keyframes and then create in-between frames to connect them. This is how computer animation works, and it’s the way you work with CSS animations. This method allows more planning up front and lets the computer do much of the work.