What Are Keyframes and Easing? The Basics of Animated Motion (2026)
A keyframe marks the value of a property — position, scale, opacity, volume, anything — at a specific point in time. With interpolated keyframe animation, the software calculates values between the keys using the chosen interpolation mode. Easing controls how that motion accelerates and decelerates between keyframes: linear interpolation changes a value at a constant rate, while other curves vary that rate. Choose steady or eased motion to suit the action. Keyframes are the what and when; easing is the feel.
Many title slides, photo zooms, audio fades, and caption animations use keyframes and easing. They are powerful tools, but not the only way to animate: expressions, procedural systems, and simulations can also drive change. 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. This article covers animation keyframes, not the independently coded pictures discussed in video compression.
What is a keyframe?
A keyframe is a marker that stores the value of an animatable property at a specific moment in time, as described in the Blender keyframe manual. It answers two questions at once: what value (e.g., "opacity = 0") and when (e.g., "at 2 seconds").
To explicitly define a changing start and end value with keyframes, set at least two keys. One key alone does not specify that change unless another mechanism, such as an expression or implicit starting value, supplies it. For a simple interpolated fade, 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 terminology connects to traditional hand-drawn animation: key poses establish important moments of an action, and inbetween drawings connect those poses. A wave, for example, needs both its main poses and the spacing of the drawings between them.
This division of work is described in traditional animation literature such as Frank Thomas and Ollie Johnston's The Illusion of Life: Disney Animation. The point is the key/inbetween relationship, not a claim that one studio invented every form of keyframe animation.
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.
Many movements accelerate or decelerate: a car starts and brakes, a falling ball speeds up, and a door settles. Easing can suggest that behavior. Constant-speed motion is also valid for a conveyor, a steady pan, a ticker, or a continuous loop. Match the curve to the action rather than treating linear interpolation as an error.
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 use the same endpoint values and achieve different timing and character through their interpolation choices.
Linear vs ease-in vs ease-out vs ease-in-out
These are four useful starting points for interpolated motion:
| Easing | What it does | Feels like | Use for |
|---|---|---|---|
| Linear | Constant rate of change | Steady, uniform | Tickers, steady pans, mechanical motion, continuous loops |
| Ease-in | Starts slow, speeds up | Accelerating away | Objects leaving, exits, building energy |
| Ease-out | Starts fast, slows down | Decelerating to rest | Objects arriving, entrances (the most-used) |
| Ease-in-out | Slow, fast, slow | Smooth and natural | Moves that start and end on screen |
Useful starting choices are ease-out for an entrance that settles into place and ease-in-out for a move that starts and stops on screen. Keep linear when an even rate serves the action. Direction, travel distance, duration, and the surrounding motion matter as much as the preset name.
The traditional principle "slow in and slow out", discussed in The Illusion of Life, describes controlling drawing spacing around a movement's start and finish. Digital easing provides a related timing control.
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:
| Curve | Character | Typical use |
|---|---|---|
| Linear | Flat, constant | Mechanical motion, some loops |
| Ease (standard) | Gentle in and out | General-purpose smooth motion |
| Cubic / Quart / Quint | Progressively snappier ease | UI, titles, punchy entrances |
| Bounce | Rebounds toward rest, usually without passing the endpoint | Playful impact or landing |
| Elastic | Springs past and wobbles back | Attention-grabbing, cartoonish |
| Back | Slight overshoot, then settles | Satisfying "snap into place" |
| Custom Bézier | Any shape you draw | Precise, brand-specific motion |
Many editors offer Bézier curves with adjustable handles, alongside formula-based easing presets. In a value-versus-time graph, the slope indicates the property's rate of change; in a speed graph, the plotted value is speed and its slope indicates acceleration. Check which graph you are editing. A spatial path curve is a different control from temporal easing.
What can you keyframe?
Many properties can be keyframed where the editor exposes animation controls. 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, if available, and adjust the handles. On a value graph, a steeper slope means faster change; on a speed graph, higher values mean faster motion. Fine-tune timing and any intentional overshoot.
Step 6: Mind your frame rate and duration
For UI-style motion, 0.3-0.8s can be a useful starting range, not a universal rule. Frame-based timing changes duration when fps changes: 24 frames last one second at 24fps but 0.4 seconds at 60fps. Time-based keys one second apart keep that duration, with different sampling smoothness. Preview at the delivery frame rate.
Common keyframe and easing mistakes
- Choosing interpolation without considering the action. Ease starts and stops when appropriate; keep linear for deliberate steady 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.
- Confusing frames with seconds. A fixed frame count changes duration at another fps; verify time-based and frame-based timing separately.
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.
Some AI video editors offer animation presets for captions, titles, or lower thirds. A preset may include interpolation and timing without exposing individual keys, and it does not inherently require AI. Preview the result; a preset cannot guarantee the right motion for every scene.
For Loopdesk (disclosure: Loopdesk is our product), the feature specifications describe animated captions and prompt-driven styling. They do not establish a custom curve editor or every title and lower-third animation behavior. Use the available controls, preview the timing, and check which properties can actually be adjusted. It belongs to the titles-and-graphics finishing stage of the edit. Keyframes are one possible implementation; a preset or procedural effect may work differently. Understanding timing and easing still helps you describe a slower arrival, a sharper stop, or steadier motion without assuming how the tool implements it. Keyframes and easing are one stop on the full video editing glossary.
Frequently Asked Questions
What is a keyframe in video editing?
A keyframe stores a property's value at a particular time. With interpolated animation, the software computes values between keys using the chosen mode. This is different from a compression keyframe in a video codec, and it is not the only way to animate.
What is easing in animation?
Easing shapes the rate of change between animation values. Ease-in accelerates, ease-out decelerates, and ease-in-out does both. Linear interpolation keeps a constant rate and is useful for steady movement. The appropriate curve depends on the action and timing.
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?
Check duration, distance, abrupt starts and stops, and consistency with surrounding motion. Easing may help an arrival settle, but linear motion can be right for steady movement. Changing the curve alone does not guarantee a polished result.
What can you keyframe?
Properties exposed by the editor may include position, scale, rotation, opacity, volume, masks, and effect settings. Keyframing is one way to animate them; expressions, procedural effects, and simulations can also drive change.
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 for every preset-based task. Available presets may handle timing without exposing individual keys, with or without AI. Understanding keyframes and easing helps you evaluate the motion and describe changes; it does not imply that every tool exposes custom curves.
Working on animated captions? Check the Loopdesk feature specifications, then open Loopdesk to style your edit and preview the available animation controls at the intended delivery rate.