Keyframes and Easing Explained: Why Motion Feels Alive

A keyframe is a recorded value at a specific moment. Set a position at one second, set another position at two seconds, and the software fills in every frame between them. That simple idea drives nearly all motion graphics, from a lower third sliding into place to a logo that bounces onto the screen. This guide explains how keyframes work, why the default motion often looks stiff, and how easing curves give movement a sense of weight.

Keyframes store values, not motion

A keyframe does not describe motion directly. It records a value, such as position, scale, opacity or rotation, at a given time. The motion you see is the path between values. Two keyframes at the same spot produce no movement, while two keyframes far apart produce a fast move. Timing and spacing matter as much as the numbers.

Every property you animate can have its own keyframes. Position, scale and opacity often run on separate timelines, which lets you stagger them. A title might fade in over a quarter second while it slides for half a second. Separate tracks give you control that a single combined move cannot.

Interpolation decides the path

Between two keyframes, the software needs a rule for how the value changes. That rule is called interpolation. The two basic types are linear and bezier.

Linear interpolation changes the value at a constant rate. The object starts moving instantly at full speed, travels at the same speed the whole way, and stops instantly on the last keyframe. In the real world nothing moves like that, so linear motion looks mechanical. It is useful for things that should move steadily, such as a scrolling credit roll or a progress bar.

Bezier interpolation uses a curve that you can shape. The curve maps time on one axis and value on the other. A steep part of the curve means fast movement, and a flat part means slow movement. Reshaping the curve changes how the object accelerates and decelerates without changing the start or end point.

Easing is shaping the speed

Easing is the name for curves that accelerate or decelerate. The common presets are ease in, ease out and ease in and out. Ease in starts slow and speeds up, which suits an object leaving a resting place. Ease out starts fast and slows down, which suits an object arriving at its final position. Ease in and out starts and ends slowly, which suits most on-screen elements that move from one resting state to another.

Ease out is the most useful default for titles. A word that arrives quickly and settles gently feels confident. A word that arrives slowly and stops abruptly feels indecisive. Ease in is better for an element that is about to leave, because it builds speed toward the exit.

Why the default curve looks wrong

Many editors notice that a motion looks fine when it is previewed and wrong when it is rendered, or that a title feels slightly off without knowing why. The usual cause is the default interpolation. Automatic keyframes often use a linear or a generic curve, and that curve creates a moment where the object stops suddenly at the end.

The fix is simple to describe. Look at the speed graph, which shows how fast the value changes over time. Flat sections at the start and end of the graph mean the object is still. Sharp corners mean the object stops or starts abruptly. Smooth S-shaped curves give the most natural feel for most elements.

A practical timing table

Timing depends on the size of the object and the amount of space it travels, but the table below gives a useful starting point for everyday titles. These are working ranges used by many motion designers, not fixed standards.

Element	Typical duration	Suggested easing
Small text fade	0.2 to 0.4 seconds	Ease out
Lower third slide in	0.4 to 0.6 seconds	Ease out
Lower third slide out	0.3 to 0.4 seconds	Ease in
Full screen title move	0.6 to 1.0 seconds	Ease in and out

Shorter moves feel snappy and suit fast-paced edits. Longer moves feel calm and suit documentaries or quiet scenes. Match the speed of the motion to the pace of the cut so the graphics do not fight the rhythm of the story.

Anticipation and follow-through

Many animators borrow two principles from traditional animation. Anticipation is a small move in the opposite direction before the main action. A title that dips slightly before it rises looks as if it has energy stored in it. Follow-through is a small overshoot and settle at the end of a move. A logo that moves a few pixels past its final position and then returns gives a sense of mass.

Use these sparingly. A small anticipation of two or three frames is enough for most titles. Large overshoots look playful and can become distracting on a corporate or educational video.

Stagger elements for rhythm

When several elements enter together, they often look like a single block. Staggering their start times creates a rhythm the eye can follow. Offset each element by a few frames, usually between two and six at a standard frame rate, so the sequence reads from left to right or top to bottom.

Stagger the timing, not just the position. If every element uses the same easing, the stagger is subtle. Mixing a slightly faster curve on one element with a slower curve on another adds variety without adding clutter.

Check the motion before adding effects

Blur, glow and drop shadows can hide poor motion. Before adding any effect, play the animation at full speed and at a slower speed. Watch for stops that feel abrupt, paths that wobble, and elements that arrive at the same moment as others. Fix the timing first, then add effects that support the motion rather than covering it up.

Finally, watch the animation on the device your audience will use. Small screens make fast moves look like flicker, while large screens expose the smallest stutter. Adjust the duration until the motion feels clear and deliberate in both places.

Key takeaways

Keyframes store values at moments in time, and interpolation decides how the object moves between them. Easing curves give motion speed and weight, with ease out suiting arrivals and ease in suiting exits. Replace default linear motion with shaped curves, check the speed graph for abrupt stops, and stagger related elements for rhythm. Good motion graphics feel inevitable, and that feeling comes from careful timing rather than from effects.