Keyframes and In-Betweens: How Animation Is Planned

Every animation, whether drawn on paper or built in software, starts with the same question: what are the important moments? Answer that and you have your keyframes. Everything else, the frames between, follows from them. Understanding this split between keys and in-betweens is the most useful idea a beginner can learn, because it changes how you plan any motion.

What a keyframe is

A keyframe records the state of something at a specific moment. In hand-drawn animation, it's a drawing of an important pose: the character at the top of a jump, the moment a foot hits the ground. In software, a keyframe stores values: position, scale, rotation, opacity, color, and so on, at a point on the timeline.

The word comes from studio practice. Lead animators drew the key poses, and assistants, often called in-betweeners, drew the frames between them. The leads controlled the performance; the assistants made it smooth.

Keys, extremes and breakdowns

Animators often split important drawings into three types:

• Keys are the storytelling poses, the ones that would make sense as a comic strip.
• Extremes are the points where motion changes direction, such as the furthest point of a swing.
• Breakdowns are the main drawings between two extremes. They decide how the action travels: in an arc or a straight line, leading with the head or the hips.

In practice, beginners can treat keys and extremes as the same thing. Breakdowns deserve more attention, because they are where much of the character of a motion lives. Two animations with identical keys can feel completely different depending on the breakdown.

In-betweens and spacing

In-betweens are the frames that connect keys and breakdowns. Their job is to make the motion read as continuous. Two things matter: how many there are, which is timing, and where each one sits, which is spacing.

Spacing is the distance an object travels from one frame to the next. Even spacing produces constant speed. Spacing that starts close together and spreads apart produces acceleration. Spacing that spreads and then closes up produces deceleration. Hand animators plan this with a timing chart, a small diagram drawn next to a key showing where each in-between should fall. A chart with ticks bunched at both ends describes an ease-in-out.

When you use software, easing curves do the same job as the timing chart. The easing guide covers them in detail.

Onion skinning

Animators drawing on paper work on a light table: a backlit surface that shows the previous drawing through the current sheet. Digital tools copy this with onion skinning, which shows faded versions of nearby frames. Many tools color past frames one way and future frames another.

Onion skinning makes spacing visible. If a ball's ghosts are evenly spaced, it moves at constant speed. If they bunch up at the ends, it eases. Gaps where the ghosts jump far apart often mean the motion will look like it skips. Turn on the onion skin in the playground and try different easing curves to see the effect.

Pose to pose in software

Software animation usually works pose to pose. You set a keyframe at the start, move along the timeline, change a value, and the software creates a second keyframe and calculates everything in between. This is tweening.

A good workflow for beginners:

1. Block it out. Set only the main keys, with no easing (often called stepped or constant interpolation), so the object jumps from pose to pose. Check the poses and timing work like a slideshow.
2. Add breakdowns. Put in one key between each pair where the path or speed needs a specific shape, for example a high point to make an arc.
3. Switch to smooth interpolation and add easing.
4. Polish. Adjust curves, offset parts that should overlap, and add follow-through.

The blocking pass is the step people skip and regret. If the poses and timing don't work as a slideshow, smoothing won't save them.

Common mistakes

The most common one is setting too many keys. A key every few frames gives the software no room to smooth the motion, so it looks jittery. Use the fewest keys that describe the action.

A close second is keying every property at the same moments. If position, rotation and scale all share the same key times, everything starts and stops together, which looks robotic. Offset some keys by a few frames.

Watch the interpolation type, too. Most tools default to some easing, but some default to linear, and constant speed is rare in nature. Finally, software moves position in a straight line between two keys unless you add a curve or a breakdown, and living things move in arcs.

A worked example: a ball toss

Say you want a ball to arc from the left of the frame to the right over one second. You'd set three keys: start on the left at ground level, peak in the middle and high up, end on the right at ground level. Then add easing: the ball should slow as it rises to the peak and speed up as it falls, so ease-out going up and ease-in coming down. If the tool applies one easing to the whole animation, use ease-out between key 1 and 2 and ease-in between 2 and 3.

On impact you might add squash: a fourth key a couple of frames before the end with the ball stretched, and one at the end with it flattened. That's already four of the 12 principles in a one-second exercise. The principles guide explains each of them.

Keys in CSS

CSS @keyframes uses the same idea. Each percentage is a keyframe, the browser calculates the in-betweens, and animation-timing-function controls the easing between each pair. The playground on the home page exports exactly this format, and the CSS animation guide shows how to use it.

Questions

What is the difference between a keyframe and a breakdown?

A keyframe marks an important pose or state, usually the start or end of an action. A breakdown is the main drawing between two keys. It decides how the motion gets from one key to the next, for example whether an arm swings in an arc or travels straight.

How many keyframes does an animation need?

As few as describe the action clearly. A simple move needs two. A bounce or a gesture usually needs three to six. Adding too many keys makes motion look jerky, because the software has less room to create smooth in-betweens.

What is tweening?

Tweening is software calculating the in-between frames from your keyframes. It's short for in-betweening. You control the result with easing curves and by adding keys or breakdowns where the motion needs a specific shape.