Animation can appear hard, but it’s really just about one simple thing: frames. Frames are what make moving possible in every cartoon, movie, and video game you’ve ever seen. If you know how to use frames, you can design better animations, save time, and even improve professional animation services.
A lot of people don’t understand frame rates, time, or which numbers are important for their projects. So we are here to break down everything about animation frames.
We’ll talk about what frames are, how many you need for different tasks, the frequent errors that waste your time, and which software is perfect for those who are just starting out.

Need Animation Services?
Visit our Animation Service page to see how we can help bring your ideas to life!
What Is an Animation Frame? (The Base)
A frame is only one picture. That’s all. When you combine a lot of frames together and play them quickly, items start to move on the screen.

Our eyes see these quick pictures and think something is moving, which is exactly how frame-by-frame animation works. In reality, every frame is just a frozen image. One image alone doesn’t move.
There are hundreds of separate frames in every animated movie, and each frame shows a character or object in a slightly different position than the previous one.
Facts About Basic Animation Frames
- One frame = one picture
- Many frames = movement
- Faster playback = smoother motion
Every animation frame is entirely static.
They draw the same figure over and over again when they make movies. But they shift a little bit with each subsequent drawing. The character’s arm could move a little bit. Or their mouths become bigger. These small changes between pictures give a feeling that there is life.
Animation Frames Speed Reference
Frames Per Second | Where You See It | How It Feels |
12 FPS | Simple web animations | A bit jumpy |
24 FPS | Movies in theatres | Natural and smooth |
30 FPS | YouTube videos | Clean and clear |
60 FPS | Video games | Ultra smooth |
How Do Animation Frames Create Movement?
Movement in animation is only an illusion of sight. In fact, your brain thinks there is movement when there isn’t.

When you see animated creatures move, run, or leap, you’re really watching a lot of static pictures played back very fast. Every artwork shows a single instant in time.
How Many Frames Make Motion Smooth?
- 12 frames per second: Minimum for basic movement.
- 24 frames per second: The standard for professional animation
- 30 frames per second: TV shows often use this speed
- 60 frames per second: For sports and video games
Timing is the key. If you show frames too slowly, everything seems choppy, and if you show them too quickly, you’ll waste time making additional work that no one can see.
Professional animators found that 24 frames per second is the best speed. This pace makes movement appear natural without needing a lot of effort.
Animation Frame Timing Breakdown
Animation Type | Frames Needed | Time Required | End Result |
Character blink | 3-5 frames | 0.2 seconds | Quick, natural blink |
Walking cycle | 12-24 frames | 1 second | Complete the step cycle |
Ball bounce | 8-16 frames | 0.5 seconds | Full bounce motion |
Page turn | 6-12 frames | 0.3 seconds | Realistic page flip |
Your eyes can only process so much information at once. When images change faster than about 10 times per second, your brain stops seeing individual pictures. Instead, it sees continuous motion.
What Is Frame Rate in Animation?
Different frame rates work better for different projects. Some situations need more FPS (frames per second), while others work fine with fewer frames.

The right choice depends on what you’re making and where people will watch it.
Standard Animation Frame Rate Options
Frame Rate | Best Used For | Why This Rate? |
12 FPS | Simple web animations, learning | Minimum for perceived motion |
24 FPS | Film, cinematic look | Industry standard, natural motion blur |
30 FPS | TV, online video | Smooth for fast action |
60 FPS | Gaming, slow-motion source | Ultra-smooth, responsive feel |
24 FPS is the most frequent frame rate used in professional work, so most beginners should start with it.
When to Choose Each Animation Frame Rate?

12 FPS is a good frame rate for:
- Creating basic website animations
- Learning the basic concepts of animation without feeling too stressed
- Making content calls for files that are tiny
- Working on initiatives that have to be done quickly
24 frames per second is great for:
- Any animation that has to appear professional
- Short movies or longer animation works
- Content for cinemas or festivals
- Work that has to meet industry standards
30 FPS makes sense for:
- Watching TV and online services
- Action scenes that go quickly
- Animations about sports
- Content made for social networking sites
60 FPS is needed for:
- Animations and interactive media in video games
- Effects that will play in slow motion at regular speed
- High-end business work involves major costs
- Content shown on televisions with a high refresh rate
Animation Frame Rate Recommendations
Start with 24 FPS for most projects. This rate gives you professional results without overwhelming your computer or taking forever to render.
Once you get comfortable with animation basics and animation principles, you can experiment with other frame rates.
Also, avoid 60 FPS until you have solid experience with lower frame rates since the extra smoothness isn’t worth the additional work when you’re still learning fundamental animation principles.
4 Types of Frames Every Animator Should Know
Every type of frame has a different role in animation. It saves you time and makes your work look more expert if you know when and how to use each type.
1- Keyframes in Animation
Keyframes show the most important parts of your animation. These details show where the people come from, what they do, and where they end up.

What keyframes do:
- The start and finish points of any movement
- Big changes in how characters express themselves
- Moments in the story that need to be emphasized
- The main framework of your whole animation
Let’s say a character waves their hand. In keyframe animation, the hands should be down in frame 1, up high in frame 12, and back down in frame 24. These are your keyframes. The wave’s complete tale is told in just three shots.
When a ball bounces, you need keyframes at the top of the bounce, when it hits the ground, and when it bounces back up. Every keyframe shows an important moment in the ball’s path.
When keyframes work best:
- Use keyframes that are spaced 8-12 frames apart for typical actions.
- Closer keyframes (4-6 frames apart) are better for rapid motions.
- Put the keyframes farther apart (16–24 frames) for movements that are slow and dark.
- Before adding any other kinds of frames, always start with keyframes.
2- In-between Frames
The spaces between your keyframes are filled with in-betweens. They make things go smoothly instead of in a jerky or choppy way.

How in-between frames work:
- Link one keyframe to the next one.
- Set how quick or slow movement looks and how natural or mechanical it feels.
- Fill in the gaps between key postures with the missing steps.
For example, if your character’s head moves from left to right over 12 frames, you need keyframes at frame 1 (head left) and frame 12 (head right). Frames 2 through 11 are the in-betweens, and they show the head rotating slowly.
Or when a door opens in animation, keyframes show both the door closed and open all the way, but with in-betweens, you can see all the ways the door can move. The door opens more slowly when there are more in-betweens.
Rules for spacing in-between frames:
- Use 2 to 3 in-betweens for fast moves like punches and blinks.
- Add 4-8 in-betweens for normal speed movements (walking, talking)
- Put in 10 or more in-betweens for movements that are slow and careful, like reaching for something fragile.
- Software can make simple in-betweens, but you should always check and change them.
3- Breakdown Frames
Breakdown frames give you precise control over how movement flows between keyframes. They sit between keyframes and in-betweens to fine-tune the motion path.

What breakdown frames accomplish:
- Change the path an object takes between two keyframes
- Add personality and style to character movements
- Control when movement speeds up or slows down
- Fix problems with automatic in-betweens
How to use breakdowns effectively?
- For arcing motions: Place breakdown frames to make arms swing in curves instead of straight lines. A character throwing a ball needs breakdowns to show the arm following a natural arc overhead.
- For timing control: Add a breakdown frame closer to the first keyframe to make the movement start slow, then speed up. Plus, place it closer to the second keyframe to make the movement start fast, then slow down.
- For weight simulation: Use breakdowns to show heavy objects moving differently from light ones. A bowling ball breakdown frame sits lower in the arc than a tennis ball breakdown frame.
- For character personality: Confident characters get breakdown frames that favour straight, direct paths. But nervous characters get breakdown frames that create wobbly, uncertain movement paths.
- For secondary motion: Hair, clothing, and loose objects need breakdown frames offset from the main character movement by 2-4 frames to show realistic drag and follow-through.
Breakdown timing specifics:
- Put the breakdown frames in place 1/3 of the way between keyframes for faster speed
- Get them in place 2/3 of the way between keyframes to slow down
- When using complicated lines or long moves, use more than one breakdown frame.
- Start with one breakdown for each pair of keyframes and add additional ones as needed.
4- Hold Frames
Hold frames keep characters in the exact same position for several frames and create pauses, add weight to movements, and give viewers time to absorb information.

Why holding frames matter:
- Stop characters from looking hyperactive or jittery
- Emphasize important dialogue or facial expressions
- Show that objects have real weight and mass
- Give audiences time to read text or process visual information
Example: A character finishes speaking and holds their final expression for 8-10 frames before moving again. This gives the audience time to understand what was said. Or even after a character lands from a jump, hold them in the landing pose for 4-6 frames to show the impact had weight, and the character needs a moment to recover.
Strategic hold placement:
- After big movements: Hold for 6-12 frames after jumps, falls, or impacts
- During dialogue: Hold facial expressions for 8-15 frames to emphasize emotions
- Between actions: Use 3-5 frame holds as characters transition from one activity to another
- For emphasis: Hold important poses for 10-20 frames to make sure viewers notice them
- Avoid long holds: Never hold the same pose for more than 30 frames unless it’s for dramatic effect
Hold frame timing:
- Quick holds: 2-4 frames for brief pauses
- Standard holds: 6-10 frames for normal resting points
- Dramatic holds: 12-24 frames for emphasis or tension
- Transition holds: 3-6 frames between different movements
How Many Frames Do You Actually Need? (Practical Guidelines)
The number of frames you need depends on what you’re making and where people will see it.
Animation Type | Recommended FPS | Total Frames for 10 Seconds | File Size Impact |
Character animation | 12-24 FPS | 120-240 frames | Medium to large |
Motion graphics | 24-30 FPS | 240-300 frames | Large |
Web animations | 12-15 FPS | 120-150 frames | Small to medium |
Gaming animations | 30-60 FPS | 300-600 frames | Very large |
You can get away with 12 frames per second for most character movement because it lets you move smoothly without making too much effort for yourself. Also, 24 FPS is common in professional studios, but it means twice as much effort for you.
Character Animation Needs:
- Simple movements: 8-12 frames total
- Complex actions: 24-48 frames total
- Dialogue scenes: 12 FPS works perfectly
- Action sequences: Bump up to 24 FPS for impact
Time vs Quality Balance in Animation Frames
More frames mean more time and money spent. But smart artists know how to get good results even if they don’t get every frame just right.
Ways to Save Money in Animation Frames:
- Switch to 24 FPS only for important scenes and 12 FPS for most scenes.
- Animate the primary characters at higher frame rates and the background characters at lower rates.
- Do not make long, separate animation segments; instead, loop small cartoons.
- Put more frames on close-ups, where people notice details the most.
When Less Frames Work Better: Stylized animation, retro effects, and certain artistic choices benefit from choppier movement.
Tools and Software For Animation Frames
Different software works better for different types of animation, and the right choice depends on your budget, experience level, and project needs.
Software Type | Beginner Friendly | Professional | Free Options |
2D Animation | Adobe Animate | Toon Boom Harmony | OpenToonz |
3D Animation | Blender | Maya/Cinema 4D | Blender |
Motion Graphics | After Effects | After Effects | DaVinci Resolve |
Specific Software Recommendations
Software | Type | Cost | Best For | Learning Time |
Adobe Animate | 2D Animation | $20/month | Character animation, web content | 2-3 months |
Toon Boom Harmony | 2D Animation | $50/month | Professional studios, TV shows | 4-6 months |
OpenToonz | 2D Animation | Free | Learning basics, personal projects | 3-4 months |
Blender | 3D Animation | Free | Everything 3D, motion graphics | 6-8 months |
Maya | 3D Animation | $200/month | Film industry, complex projects | 8-12 months |
Cinema 4D | 3D Animation | $95/month | Motion graphics, advertising | 4-6 months |
After Effects | Motion Graphics | $20/month | Corporate videos, visual effects | 3-5 months |
DaVinci Resolve | Motion Graphics | Free | Colour grading, basic animation | 2-4 months |
Common Animation Frame Mistakes (And How to Avoid Them)
New animators run into the same problems over and over.
Mistake 1: Creating Too Many Frames
Some beginners think adding more frames automatically improves their animation. But in reality, it creates overly smooth movement that feels unnatural and takes forever to make.
How to spot over-smoothing:
- Your characters float instead of moving with weight.
- Actions take too long to finish.
- Everything feels like it’s moving through thick liquid.
- The movement lacks impact and energy.
How to Fix It:
- Start every project at 12 FPS maximum
- Only increase the frame rate for specific fast actions
- Test your animation at 12 FPS before adding more frames
- Focus on good poses instead of smooth transitions
- Use 24 FPS only when clients specifically request it
Mistake 2: Mixing Frame Rates Randomly
Switching between different frame rates without planning makes your animation look inconsistent and unprofessional. Common mixing problems are:
- Using 24 FPS for some scenes, 12 FPS for others
- Importing elements created at different frame rates
- Changing frame rate mid-project without adjusting timing
How inconsistency shows up:
- Some parts move smoothly while others jerk around.
- Audio doesn’t match visual timing.
- Certain scenes feel rushed or too slow.
- The Overall animation feels broken and amateurish.
Step-by-step fixes:
- Pick one frame rate at the start and never change it
- Convert all imported elements to match your project frame rate
- If you must mix rates, do it on purpose for specific effects
- Always preview your entire animation before finalizing
- Check that the audio stays synced throughout
Mistake 3: Skipping Keyframe Planning
If you start animating without drawing out your main poses, the narrative will be weak and the actions will be confusing.
Planning mistakes beginners make:
- Drawing in-between frames before establishing keyframes
- Making every pose equally important
- Not testing keyframe timing before adding details
- Copying poses without understanding their purpose
How To Fix It in Steps:
- Sketch rough keyframes first (stick figures work fine)
- Test keyframe timing by playing them in sequence
- Adjust keyframe spacing until timing feels right
- Add breakdown frames only after keyframes work
- Create in-betweens last, never first
Mistake 4: Wrong Frame Rate for Delivery Platform
When you use frame rates that don’t match your final platform, it causes technical difficulties and makes viewers angry.
Platform matching problems:
- 60 FPS files are too large for web hosting
- 12 FPS looks choppy on professional presentations
- The export frame rate doesn’t match the project frame rate
- Final files won’t play correctly on target devices
Platform-Specific Frame Rate Rules:
Platform | Required FPS | File Size Limit | Export Format |
Web/Social Media | 12-15 FPS | Under 5MB | MP4, GIF |
Broadcast TV | Exactly 30 FPS | No limit | MOV, MP4 |
Film/Cinema | 24 FPS | No limit | MOV, ProRes |
Gaming | Match engine (30-60 FPS) | Varies | Engine specific |
Presentations | 24-30 FPS | Under 50MB | MP4, MOV |
Platform Optimization Steps:
- Set project frame rate to match final delivery needs
- Test exports on actual target devices
- Keep backup versions at different frame rates
- Compress files appropriately for each platform
Last Words
Each frame is just a picture that moves when played quickly together. Don’t spend time making things ultra fluid because most animations work just fine around 12 to 24 frames per second. First, plan out your keyframes. Then, add additional forms of frames to link them correctly. Always choose the right frame rate for the place where people will see your animation.