Skip to content
Study Hall
Lesson 3 of 7Animation & Special Effects
Unit 2 · Lesson 3 of 7

Keyframes, Tweening and Frame Rate

How software turns a handful of poses into smooth motion, what frame rate to choose and why, and the arithmetic that turns seconds into frames.

4 min read10 practice questionsAsk AI about this →

Key things to remember

  1. 1A keyframe stores a property's value at one point in time; tweening calculates the frames between two of them.
  2. 2Interpolation is the rule used for tweening — linear gives constant change, bezier gives easing.
  3. 3Fewer keyframes with well-shaped curves beats many keyframes fighting the interpolation.
  4. 4Onion skinning ghosts neighbouring frames so you can judge spacing and arcs while working.
  5. 5Motion appears continuous above roughly 12 fps.
  6. 624 fps is the film standard, 30 fps is broadcast and online, 60 fps is games and sports.
  7. 7
  8. 8Timecode is HH:MM:SS:FF, and the frames field depends entirely on the project frame rate.

Animation software does not ask you to draw every frame. You set a few important ones and let it calculate the rest. Knowing exactly what it is calculating — and where it will get it wrong — is the difference between directing the software and fighting it.

Keyframes and tweening

You set two keyframes. The software builds the five frames between them.KEY123456KEY75 in-between frames, interpolated — nobody draws theseA keyframe stores position, scale, rotation and opacity at one exact time.Move one key and every tween is recalculated — which is why you animate byediting keys, never by editing the frames in between.
Fig 1Two keyframes and the frames the software generates between them.
  • A keyframe records the value of a property — position, scale, rotation, opacity, colour — at one specific point in time.
  • Tweening (short for in-betweening) is the software calculating every frame between two keyframes.
  • Interpolation is the rule it uses to calculate them. Linear gives constant change; bezier curves give easing.
  • A motion path is the route an object follows between position keyframes. Straight by default, and worth curving deliberately.
Two position keyframes, two very different pathssoftware default — a straight tweenwhat you want — an arckey 1key 2Add a third key at the top of the arc, or drag the bezier handles on the motion path.Nothing alive travels in a straight line — a straight tween reads as machinery.
Fig 2The default straight path, and the curved one an animator would actually want.
Fewer keyframes usually means better motion
Beginners add keyframes everywhere, which fights the interpolation and produces jittery movement. Set the fewest keys that define the action — usually the start, the end, and any pose that must be hit exactly — and then shape the curves between them. Control the curve, not the frame count.

Onion skinning shows faint ghosts of the surrounding frames while you work on the current one. It is how you judge spacing, keep an arc consistent, and see at a glance whether your in-betweens are evenly distributed — which is exactly what you usually do not want them to be.

The frame you are drawing, with its neighbours showing throughearlier frames (ghosted)later frames (ghosted)current frametight gaps = slowwidening gaps = speeding upOnion skinning is the only way to judge spacing while you draw a single frame.Even gaps read as constant speed; a cluster of tight gaps reads as a pause or an ease.
Fig 3Ghosted neighbouring frames make uneven spacing — the source of easing — visible while you draw.

Frame rate

Frame rate is how many still images are shown each second, measured in frames per second (fps). Motion appears continuous above roughly 12 fps, but the specific rate you choose carries meaning — audiences read different rates as different kinds of image.

One second of the same action, sampled four ways1 second12 fpshand-drawn animation “on twos” — visibly steppy, cheap to draw24 fpsthe cinema standard; smooth enough for story, keeps motion blur30 fpsNorth American broadcast and most phone video60 fpssport, screen capture and slow motion — twice the data of 30Shoot and export at the same rate. Converting 30 to 24 has to throw frames away.
Fig 4The same one-second action at four common rates. More frames, more data, smoother motion.
RateWhere it is usedWhy
12 fpsTraditional animation 'on twos'Each drawing held for two frames at 24 fps — half the drawings, still reads as motion
24 fpsFilm, and anything wanting a cinematic lookThe cinema standard since the 1920s; audiences read it as 'film'
30 fpsNorth American broadcast and most online videoDerived from the 60 Hz mains frequency
60 fpsGames, sports, screen recordingVery smooth; often described as looking 'like video' rather than film
Why 24 fps still looks like cinema
It is not a technical optimum — it was chosen as the cheapest rate that carried acceptable sound. A century of film at that rate has trained audiences to read its particular motion blur as 'cinema', which is why high-frame-rate films are so often described as looking like a soap opera. The association is cultural, not physical.

Frames, duration and timecode

The arithmetic behind every animation timeline.

Timecode identifies an exact frame in the format HH:MM:SS:FF — hours, minutes, seconds, frames. The last pair counts frames within the current second, so at 30 fps it runs 00 to 29 and then rolls the seconds over. Timecode is how an editor, a composer and a sound designer refer to the same instant without ambiguity.

The frames field depends on the frame rate
00:00:02:15 is two and a half seconds at 30 fps, but two and five eighths of a second at 24 fps. Timecode is meaningless without knowing the project's frame rate, which is why it is always agreed before shooting starts.
Set the frame rate first and never change it
Changing frame rate partway through a project forces every keyframe to be recalculated, and timings that were tuned by eye stop landing where they did. Decide it during planning, match it to your destination, and leave it alone.

Worked examples

Reveal one step at a time and try to beat it to the next line.

Example 1
How many frames are in a animation at 24 fps? And at 60 fps?
Example 2
An action must last exactly in a 30 fps project. It starts at timecode 00:00:04:00. What is the timecode at the end?
Example 3
A student sets 30 keyframes across a two-second move and complains the motion looks jittery. What has gone wrong, and what should they do?

Where marks get lost

  • Adding a keyframe on every frame, which defeats interpolation and produces jitter.
  • Changing the project frame rate partway through, which invalidates every timing already tuned by eye.
  • Reading a timecode without knowing the frame rate. The frames field means nothing on its own.
  • Letting the frames field run past the frame rate, so 00:00:01:35 appears in a 30 fps project.
  • Leaving motion paths straight when the software defaults them that way.
  • Choosing 60 fps for everything, which multiplies file size and render time without suiting the material.
  • Working without onion skinning and then wondering why the spacing is uneven in the wrong places.

Flashcards 10

Keyframe
Tweening
Interpolation
Onion skinning
+ 6 more

Practice

1
How many frames are in an clip at 30 fps?
frames
2
A 24 fps animation is 360 frames long. How many seconds does it run?
s
3
What is tweening?
4
Why does adding a keyframe on nearly every frame usually make motion worse?
5
What is the standard frame rate for cinematic film?
6
In a 30 fps project, what does the timecode 00:01:20:15 represent?
7
An animation runs for at 60 fps. How many frames is it?
frames
8
What feature ghosts the neighbouring frames so you can judge spacing while drawing?
9
Match each frame rate to where it is normally used.
12 fps
24 fps
30 fps
60 fps
10
Order these steps for animating a move with keyframes.
  1. 1Check the spacing with onion skinning and adjust
  2. 2Shape the interpolation curves so the motion eases
  3. 3Add any intermediate key the action must hit exactly
  4. 4Set the project frame rate during planning
  5. 5Place a keyframe at the start pose and one at the end pose

Spot a mistake on this page? Let us know