Animation Basics: Complete Beginner's Guide For students.

Animation is the technique of making still images appear to move, by showing a rapid sequence of slightly different pictures called frames. Your eyes and brain blend these separate images into continuous motion — the same illusion you get from a flipbook when you riffle its pages quickly.

It matters because animation is how moving images reach us everywhere: cartoons, video games, app transitions, film effects, even the smooth scrolling on your phone. Frames, timing and keyframes are the starting point for anyone who wants to create motion rather than just watch it.

Key Concepts

• Frame and FPS — one still image; frames per second is how many show each second. Films use 24, games target 60, and classic cartoons often animated on "twos" (12 drawings per second, each held for 2 frames).
• Keyframe — a frame where the animator defines an exact pose or value. The computer fills the frames between two keyframes automatically, a process called tweening.
• Timing — how many frames an action takes. A fast punch might take 6 frames (a quarter second at 24 fps); a slow bow might take 48 frames (2 seconds).
• Easing — real motion speeds up and slows down. Ease-in starts slow, ease-out ends slow; both look far more natural than constant speed.
• Squash and stretch — a bouncing ball squashes flat on impact and stretches while moving fast, keeping its volume constant while selling weight and speed.

Formulas

• Frame duration: one frame lasts 1 / FPS seconds. At 24 fps each frame lasts about 41.7 ms; at 60 fps about 16.7 ms.
• Frame count: total frames = seconds × FPS. A 5-second clip at 24 fps needs 120 frames; at 60 fps it needs 300.
• Linear interpolation: the value at frame n between keyframes (a, Va) and (b, Vb) is V = Va + (Vb − Va) × (n − a) / (b − a), for motion at constant speed between the keys.

Worked Example

A ball rolls from x = 0 to x = 480 over exactly 2 seconds at 24 fps. Where is it halfway through, using linear interpolation?

1. Total frames = 2 × 24 = 48. Keyframes: frame 0 (x = 0), frame 48 (x = 480).
2. Halfway is frame n = 24.
3. x = 0 + (480 − 0) × (24 − 0) / (48 − 0) = 480 × 0.5 = 240.
4. The ball is at x = 240 — the exact middle — 1 second into the clip. An animator would then add ease-in-out so it accelerates and decelerates instead of moving robotically.

Common Misconceptions

• "More frames per second always looks better." The classic 24 fps film look feels natural to audiences, and good timing with fewer drawings beats bad timing with more drawings.
• "The computer does all the animation." Tweening only fills gaps between keyframes; the animator still designs the poses, timing and easing that make motion feel alive.

Real-World Applications

• Film and TV cartoons, anime and 3D movies are built entirely on these principles.
• Video games animate characters, menus and effects in real time at 30–120 fps.
• Apps and websites use small animations — button bounces, loading spinners, page transitions — to feel responsive and guide attention.

Animation basics come down to three ideas: enough frames per second to fool the eye, keyframes that define the important poses, and timing with easing that feels natural. Master those, and you can bring any drawing, character or interface to life.