Why pressing Easy Ease still looks wrong

The handle has two properties and you only used one

Select two keyframes, press the ease key, and the motion improves. It also stops improving there, and most people never find out why.

A bezier handle on a keyframe has two independent properties:

• Angle: the direction the curve leaves or arrives at the keyframe. Setting it flat is what makes the speed zero at that point.
• Influence, or length: how far into the interval that flatness persists before the curve turns.

Pressing the ease shortcut sets both, to a symmetric default. In After Effects that default is 33.33% influence on each side. In CSS, ease is cubic-bezier(0.25, 0.1, 0.25, 1). Neither number was chosen for your shot. They are a compromise that makes everything a little better and nothing actually good.

The asymmetry rule

Most motion that reads well is asymmetric, and the reason is physical. A thing arriving has to shed energy, which takes time. A thing departing under its own power can accelerate hard and then leave the frame at speed: the deceleration happens off-screen or not at all.

So:

• Something arriving or settling: little or no ease on the way in, a long ease on the way out. Try 10% in, 75% out.
• Something leaving: a long ease in, little on the way out, because you never see it stop.
• Something moving between two positions and staying: ease both, but not equally: around 30% in, 60% out reads as intentional rather than symmetrical.

The symmetric default is the one shape that never happens in the world: an object that decelerates exactly as gradually as it accelerated, having apparently decided both in advance.

Why symmetric easing feels mushy

The distance is fixed and the duration is fixed. If both ends are slow, all the travel has to be crammed into the middle. You get slow, then a burst, then slow. The eye reads that centre burst as the real motion and the slow ends as hesitation, so the whole move feels indecisive without anybody being able to say why.

Move the influence to one side and the picture changes: the object commits, then relaxes. Same two keyframes, same duration, different reading.

The numbers people actually ship

If you want a starting point rather than a principle:

/* browser defaults */
ease:        cubic-bezier(0.25, 0.10, 0.25, 1.00);
ease-out:    cubic-bezier(0.00, 0.00, 0.58, 1.00);
ease-in-out: cubic-bezier(0.42, 0.00, 0.58, 1.00);

/* the curve most design systems converge on for UI */
standard:    cubic-bezier(0.40, 0.00, 0.20, 1.00);
decelerate:  cubic-bezier(0.00, 0.00, 0.20, 1.00);
accelerate:  cubic-bezier(0.40, 0.00, 1.00, 1.00);

The four numbers are the x and y of the two control points on a unit square: time across, progress up. 0.40, 0.00 says the curve leaves the origin flat and slightly late: a short, firm acceleration. 0.20, 1.00 says it arrives at full progress early and coasts: a long settle.

Notice that the standard curve is exactly the asymmetry described above, expressed as four decimals.

Overshoot, and how much

An object that arrives and stops dead at its target looks correct and dull. An object that passes the target and comes back reads as having mass.

With bezier keyframes this needs a third keyframe: target at 105 to 110%, then back to 100%. The return should take roughly twice as long as the overshoot, because settling is slower than travelling.

• 103 to 106%: barely conscious. Right for anything you will see hundreds of times.
• 108 to 115%: noticeable, playful, fine for a one-off title or a logo sting.
• 125% and up: cartoon. Correct for cartoons.

The common failure is overshooting on scale and position together, which produces something that looks like it has been thrown at the screen.

Where beziers run out

A bezier curve between two keyframes is a single smooth arc. It cannot express a bounce that decays over three or four diminishing hops without you stacking keyframes and setting each one by hand. It also cannot be interrupted: if the user taps again halfway through, a keyframed tween has to be cancelled and restarted, and the restart is visible as a jump.

Those two limits (decay, and interruptibility) are the whole argument for springs, which is the next lesson. Beziers are for motion you fully control from start to finish. Springs are for motion that has to respond to somebody.

The practical move

Next time an animation is nearly right, do not add a blur or a glow. Open the graph, grab the outgoing handle, and drag it from a third of the way across to about three-quarters. Watch what happens to the settle. That one drag is most of the difference between animation that looks made and animation that looks defaulted.