Frame Rates and Timing in Animation: 24 fps, Twos and Beyond

Timing in animation comes down to counting. How many frames does a blink take? How long does a ball hang at the top of its bounce? Frame rate sets the unit you count in, and timing is how many of those units you give each action. Get comfortable with both and you can plan an animation before drawing a single frame.

Frames per second

Frame rate is the number of images shown each second. The common ones:

For most 2D animation, 24 fps is the sensible default. It's what audiences associate with animated films, it divides neatly into halves and thirds, and timing charts and tutorials usually assume it. If your work will live in a project set to 30 or 60 fps, animate at that rate from the start rather than converting later, because conversions duplicate or drop frames unevenly.

Browsers don't have a fixed frame rate for CSS animation. They draw as often as the display refreshes, usually 60 times a second and higher on fast displays, and calculate in-betweens from time, not frame numbers.

Ones, twos and threes

Frame rate and drawing rate aren't the same. Animators often hold each drawing for more than one frame.

On ones, every frame has a new drawing: 24 drawings per second at 24 fps. Motion is smooth, which suits fast action, camera moves and anything that slides across the screen.

On twos, each drawing is held for two frames: 12 drawings per second. This is the traditional default for a lot of hand-drawn TV and film animation. It halves the workload and gives motion a slightly crisper, more graphic feel.

On threes or more, motion gets choppier. Limited animation uses it to save work, and some styles use it on purpose for a stylized look.

Many productions mix them, switching to ones for fast moves and twos for everything else. In the playground, the onion skin shows ghosts at 12 per second, the spacing you'd see if you animated the move on twos at 24 fps.

How long should an action take?

There's no table that answers this for every case, but rough starting points help. Treat these as first guesses at 24 fps, to adjust once you see the motion:

• A quick blink: about 3 to 6 frames.
• A head turn: about 8 to 16 frames.
• A ball dropped from table height to the floor: under half a second, about 8 to 10 frames.
• A normal walking step: about 12 frames per step, so a full stride cycle of about 24 frames.
• A held pose that the audience needs to register: at least 6 to 8 frames, often more.

The best reference is real life. Act out the motion with a stopwatch, or film yourself and step through the footage frame by frame. Animators do this constantly.

Timing changes weight and mood

The same distance covered in different frame counts reads differently. Fewer frames feel light, fast or sudden. More frames feel heavy, slow or deliberate. A heavy object takes longer to start moving and longer to stop, so it needs more frames in its ease-in and ease-out. A light object changes direction almost instantly.

Timing also sets mood. A character who slumps into a chair over 30 frames feels tired; over 8 frames, they've collapsed. A pause before a reaction lets the audience anticipate it.

Exposure sheets

Traditional studios plan timing on an exposure sheet (or X-sheet), a chart with one row per frame. Columns hold the drawing number for each layer, dialogue broken down by frame, and camera instructions. It reads top to bottom like a script measured in frames. Digital tools replace it with a timeline, but the idea is the same: time is a ruler, and every action gets a measured length.

Our guide list on the home page borrows that layout, for what it's worth.

Timing for web and interface animation

Interface motion works in milliseconds, and it's usually short, because people are waiting for it. Common starting points:

• Small changes such as a button's hover state: about 100 to 200 ms.
• Elements entering or expanding, such as a menu or a card: about 200 to 300 ms.
• Larger moves across the screen or page transitions: about 300 to 500 ms.

Larger distances and larger elements generally need a little more time; tiny changes need less. Animations that block the user from doing anything should be as short as possible. Decorative animation that runs on its own can be longer, but give people a way to stop anything that loops or lasts more than a few seconds. The CSS guide covers reduced-motion settings.

Practice: the timing test

Animate the same ball drop three ways: 6 frames, 12 frames and 24 frames, all at 24 fps. Keep the easing identical. Watch them side by side and decide which reads as a marble, a tennis ball and a balloon. Then adjust the easing on each until the weights feel right. This exercise teaches more about timing than any chart.

Questions

What frame rate should I animate at as a beginner?

24 frames per second is a safe default for character animation and short films, and many beginners animate on twos, holding each drawing for two frames, which gives 12 drawings per second. For video meant for platforms that use 30 or 60 fps, set your project to that rate from the start.

Does a higher frame rate make animation better?

Not automatically. Higher frame rates make motion smoother, which suits games and interface animation. For drawn animation, smoothness can make motion look floaty, and every extra frame is extra work. Timing and spacing matter more than the rate.

How do I convert frames to seconds?

Divide the number of frames by the frame rate. At 24 fps, 12 frames is half a second and 36 frames is a second and a half. To go the other way, multiply seconds by the frame rate.