What Are Keyframes and Easing? The Foundation of All Motion (2026)

A keyframe marks the value of a property — position, scale, opacity, volume, anything — at a specific point in time. Set two keyframes with different values and the software automatically calculates ("interpolates") all the frames in between, creating motion. Easing controls how that motion accelerates and decelerates between keyframes: linear easing moves at a constant, robotic speed, while eased motion speeds up and slows down like things do in the real world. Keyframes are the what and when; easing is the feel.

Every animation you've ever seen — a title sliding in, a photo slowly zooming, audio fading out, a caption bouncing onto screen — is built from these two ideas. Master them and you can animate anything; ignore easing and even good animations look cheap. This guide covers both from first principles, the surprising history behind the word "keyframe," the easing curves that separate amateur from professional motion, and how AI now handles it. Short versions are in the keyframe and easing glossary entries.

What is a keyframe?

A keyframe is a marker that stores the value of an animatable property at a specific moment in time. It answers two questions at once: what value (e.g., "opacity = 0") and when (e.g., "at 2 seconds").

Animation needs at least two keyframes to exist. One keyframe alone is just a static value. But set:

• Keyframe 1 at 0:00 → opacity = 0% (invisible)
• Keyframe 2 at 0:01 → opacity = 100% (fully visible)

...and you've created a one-second fade-in. The software fills in every frame between the two keyframes, gradually raising opacity from 0 to 100. You defined two points; the computer drew the path between them.

That "filling in between" is the heart of keyframe animation, and it has a name — and a history worth knowing, because it explains the terminology you'll see everywhere.

Where "keyframe" comes from: cels and inbetweening

The word predates computers. In traditional hand-drawn animation (think classic Disney), a senior key animator drew only the most important frames of a movement — the "key" poses. A character's arm at the start of a wave, and at the end of the wave. These were the keyframes.

Then junior artists called inbetweeners drew all the frames in between the keys to create smooth motion. This process was called "inbetweening" or "tweening."

Digital editing kept the exact same concept — you set the key poses, the software does the inbetweening — which is why the automatic filling-in between keyframes is called interpolation or tweening to this day. When you set two keyframes in any modern editor, you are the key animator; the software is your inbetweener.

What is interpolation (tweening)?

Interpolation is the process the software uses to calculate the values between your keyframes. If keyframe 1 says "x-position = 0" and keyframe 2 says "x-position = 500," interpolation computes the position at every frame in between so the object travels smoothly from 0 to 500.

There are different kinds of interpolation, but the most important distinction for beginners is between:

• Linear interpolation — values change at a perfectly constant rate. The object moves the same distance every frame.
• Curved (eased) interpolation — values change at a varying rate, accelerating and decelerating.

And that distinction — the rate at which interpolation happens — is exactly what easing controls.

What is easing?

Easing is the control over how motion accelerates and decelerates between keyframes. It's the difference between a robot arm sliding a card across a table at one rigid speed, and a human hand that starts slow, speeds up, and gently comes to rest.

Nothing in the physical world moves at a perfectly constant speed. A car accelerates from a stop and brakes to a halt. A ball dropped from your hand speeds up as it falls. A door swings open fast and settles slowly. Our brains expect motion to have this acceleration and deceleration — and when animation lacks it (linear motion), it reads as mechanical, cheap, and "off," even if the viewer can't say why.

Easing adds that natural acceleration curve. It's often the single biggest difference between motion that looks amateur and motion that looks professional. Two animators can set the exact same keyframes; the one who eases them wins.

Linear vs ease-in vs ease-out vs ease-in-out

These are the four foundational easing types. Understanding them covers 90% of real-world animation:

The most common professional default is ease-out for entrances (something flies in fast and settles gently) and ease-in-out for anything that moves from one on-screen position to another. Linear is the one to avoid unless you specifically want a mechanical feel — it's the tell-tale sign of un-eased, beginner animation.

This principle is so fundamental that it's one of Disney's famous 12 basic principles of animation, where it's called "slow in and slow out."

Common easing curves

Beyond the basic four, editors and motion designers use named curves and custom shapes. You'll see these across video editors, motion tools, and even CSS on the web:

Under the hood, most easing is defined by a Bézier curve — the same kind of curve used for drawing paths — where you drag handles to shape the acceleration. A graph editor (or "curve editor") in your software lets you see and sculpt this curve directly: the steeper the curve, the faster the motion at that moment.

What can you keyframe?

Almost any property can be keyframed, which is why keyframes are the universal foundation of motion. Common ones:

• Position — moving an element across the screen (a lower third sliding in)
• Scale — zooming in or out (the "Ken Burns" slow push on a photo)
• Rotation — spinning or tilting
• Opacity — fades in and out
• Volume — audio fades, ducking music under a voice
• Crop / mask — reveals and wipes
• Effect parameters — blur amount, color values, distortion
• Anchor point / speed — advanced motion and time remapping

A few everyday examples that are pure keyframes-plus-easing:

• Lower third slide-in: keyframe position off-screen → on-screen, with ease-out.
• Ken Burns effect: keyframe scale from 100% → 110% over several seconds, with ease-in-out, to add life to a still image.
• Audio fade: keyframe volume from -∞ → 0 dB at the start of a clip.
• Text pop: keyframe scale 0% → 110% → 100% with a "back" ease for a satisfying snap.

How to animate with keyframes and easing

The workflow is the same in every editor. Here's the reliable process.

Step 1: Choose the property to animate

Decide what should change — position, scale, opacity, volume. Animate one property at a time when learning.

Step 2: Set your starting keyframe

Move the playhead to the start of the animation and set a keyframe with the beginning value (e.g., opacity 0, or position off-screen).

Step 3: Set your ending keyframe

Move the playhead to where the animation should finish and set a keyframe with the end value (opacity 100, or position on-screen). You now have motion — but it's probably linear.

Step 4: Apply easing

Change the interpolation from linear to eased. For most entrances, use ease-out; for moves between two on-screen spots, use ease-in-out. This is the step that makes it look professional.

Step 5: Refine in the curve editor

Open the graph/curve editor and shape the Bézier handles to taste. Steeper curve = snappier motion. Fine-tune timing and overshoot here.

Step 6: Mind your frame rate and duration

Keep animations short (often 0.3-0.8s for UI-style motion) and remember that timing is measured in frames, so the same keyframes feel different at 24 vs 60 fps. Preview at your real delivery frame rate.

Common keyframe and easing mistakes

• Leaving everything linear. The number-one giveaway of amateur animation. Ease your motion.
• Animating too slowly. Two-second title slides feel sluggish. Most UI-style motion is under a second.
• Over-easing / too much bounce. Elastic and bounce everywhere looks childish. Reserve them for playful content.
• Animating too many properties at once. Position + scale + rotation + opacity all fighting reads as chaos.
• Ignoring the curve editor. Presets are a start; the polish is in shaping the curve.
• Inconsistent motion across a project. Different eases and durations for similar elements looks sloppy. Pick a motion "language" and reuse it.
• Forgetting frame rate. Animation timed at one fps feels wrong at another; preview at delivery rate.

How AI video editors handle keyframes and easing

Keyframing by hand is precise but slow, and most creators don't want to sculpt Bézier curves to make a caption appear. This is where AI and motion presets change the workflow.

Modern AI video editors ship professionally-eased animation presets and apply them automatically: animated captions that pop in word-by-word, lower thirds that slide with proper ease-out, and photo pushes with built-in Ken Burns — all without you touching a keyframe. The easing that used to take experience to get right is baked into the preset, so entrances and exits look intentional by default.

In Loopdesk (disclosure: Loopdesk is our product), this shows up as motion you direct rather than key by hand — captions, titles, and emphasis animations come pre-eased, and you adjust the feel in plain English or fine-tune on the timeline. It belongs to the titles-and-graphics finishing stage of the edit. The concept on this page is what's happening underneath: the AI is setting keyframes and choosing easing curves for you. Understanding it means you know why a caption looks good — and how to ask for something different. Keyframes and easing are one stop on the full video editing terminology guide.

Frequently Asked Questions

What is a keyframe in video editing?

A keyframe is a marker that stores the value of a property (like position, scale, or opacity) at a specific point in time. Set two keyframes with different values and the software automatically fills in all the frames between them, creating animated motion.

What is easing in animation?

Easing controls how motion accelerates and decelerates between keyframes. Instead of moving at a constant robotic speed (linear), eased motion speeds up and slows down like things do in the real world, which makes animation look natural and professional.

What is the difference between ease-in and ease-out?

Ease-in starts slow and speeds up (good for exits and objects leaving). Ease-out starts fast and slows to a stop (good for entrances and objects arriving). Ease-in-out does both — slow, fast, slow — and is used for moves that start and end on screen.

Why does my animation look robotic or cheap?

Almost always because it's using linear interpolation — constant-speed motion with no easing. Real-world motion accelerates and decelerates, so linear animation reads as mechanical. Applying ease-out or ease-in-out usually fixes it instantly.

What can you keyframe?

Almost any property: position, scale, rotation, opacity, volume, crop and mask, and effect parameters like blur or color. This is why keyframes are the universal foundation of all motion, from title slides to audio fades to photo zooms.

What is interpolation or tweening?

Interpolation (also called tweening) is the process the software uses to calculate the values between your keyframes. The term comes from hand-drawn animation, where "inbetweener" artists drew the frames between a key animator's key poses.

Do I need to know keyframes if AI does it for me?

Not to get started — AI presets apply professionally-eased animation automatically. But understanding keyframes and easing helps you know why motion looks good, recognize when it looks off, and describe exactly what you want to change.

---

Want polished motion without sculpting curves? Open Loopdesk: captions, lower thirds, and titles come pre-eased and animate automatically — direct the feel in plain English, or fine-tune on the timeline when you want control.