Physical objects keep the same volume when moving, whether flexible or stiff.

If an object's length increases, the width (and depth) should decrease correspondingly.

This is important for anything that should feel like it has mass, although in software, you may not need to follow this strictly (like for an expanding button).

Motion is usually preceded by some kind of build-up, whether it’s a ball beginning to roll before it falls off a table, or a person bending their knees in preparation to jump.

The "wind-up" before an action prepares the viewer for the main action.

This can also be used in more subtle ways, such as moving the camera's view to something that is about to happen, before it actually happens.

Try making objects shrink slightly before expanding, or tilt left before moving right.

Staging is making sure an object is the focus of a scene. This can be done through its position, its colour, or size and shape.

A bright object placed in front of a dark page places turns it into the main focus.

One moving object (like a button) is much more obvious when nothing else is moving.

Straight ahead action is when every frame of an animation is drawn. Pose to pose is when a series of keyframes are defined and the intervals filled in later.

Most web animation is pose to pose. The browser calculates the transition between keyframes, with the help of animation-timing-function in CSS.

The steps() timing function lets you define discrete frames to be displayed in sequence, creating a “Straight Ahead Action” style.

Most objects don't move together all at once. Due to inertia, people inside a moving car tilt forward when it decelerates suddenly, and jerk back to the center of mass afterwards.

Overlapping action refers to different parts of a whole moving at different rates.

Try making screen elements animate at different times or speeds to create a more lifelike animation.

Real world objects need time to accelerate and slow down. In animation, this is done by drawing more frames at the beginning and end of an action, and less frames in the middle.

In CSS, timing functions like ease-in (slow start, speed up), ease-out (fast start, slow down), and cubic-bezier define the rate of change during an animation.

Check out Easing Functions Cheat Sheet for visualisations of timing functions.

Natural actions tend to follow an arched trajectory. This could be an arm around a joint, or a thrown object flying in a parabola. Exceptions are in mechanical movement.

Faster objects tend to have flatter, broader arcs.

This example uses one CSS animation to control the ball's horizontal movement, and another to control the vertical bouncing.

Another way to create arcs in CSS is with rotations.

You can use the transform-origin property to shift the center of rotation outside of the element.

Secondary actions can help emphasise the primary action. A walking person can swing their arms , tilt their head or show facial expressions.

Be careful not to let them take attention away from the main action.

An example of secondary action on web pages is moving other elements away when dragging and dropping an item.

Timing refers to how long it takes for an action to complete. Correct timing makes objects appear to obey the laws of physics.

Adjusting the timing can make an object appear heavier or lighter, or add character and emotion to its behaviour. This can be achieved with animation-duration or transition-duration, or modifying individual keyframes.

Interface animations that are too fast (<100ms) could be imperceptible, while being too slow (>500ms) could make it feel clunky.

Animation, especially in cartoons, tends to exaggerate certain things (movement, expressions) to make it feel more dramatic than what reality can provide.

Exaggerating certain animations can draw extra attention to it. Overdo it, however, and too many things on screen could be screaming for attention, and you risk confusing the user.

Solid drawing takes into account forms in 3D space, giving them volume and weight, as opposed to a flat 2D shape. Skilled animators take into account form, anatomy, weight, interaction with light and shadow, etc.

Most modern browsers support 3D transforms, so in most cases we can let the browser do the linear algebra for us. This example makes use of CSS 3D transform methods like rotate, translate, and the perspective property.

An appealing character feels real and interesting to the viewer. Animators do this through composition, poses, character design, attention to detail, etc., although appeal is not just limited to visual design.

Carefully crafted animations can add appeal to a website or app's experience.