Easing Explained: Ease-In, Ease-Out, Bezier, Bounce and Elastic

Easing is what makes animation feel physical. Without it, an object starts moving at full speed, travels at that speed, and stops dead. Real objects have mass, so they accelerate and decelerate. Easing describes how the speed changes over the course of a move, and it's the classic principle of slow in and slow out turned into a curve you can edit.

The easing curve

An easing curve is a graph. The horizontal axis is time, from the start of the move to the end. The vertical axis is progress, from the start value to the end value. A straight diagonal line is linear: equal progress in equal time.

Read the slope to see the speed. Where the curve is flat, the object barely moves. Where it's steep, the object moves fast. A curve that starts flat and gets steep accelerates. One that starts steep and flattens out decelerates.

Graph editors in animation software show these curves for each animated property, sometimes as speed graphs instead of value graphs. They're the same information drawn differently. The curve panel in our playground draws value against time.

The standard presets

A useful rule for interface motion: things entering the screen use ease-out, things leaving use ease-in, and things moving within the screen use ease-in-out. Elements that arrive fast and settle gently feel responsive; elements that leave by accelerating get out of the way.

Linear has its uses. Anything that loops continuously, such as a spinning loading indicator, looks wrong with easing because it stutters at the loop point. Linear also suits changes that aren't spatial, such as fading between colors.

Cubic-bezier: drawing your own

Most tools, and CSS, let you define a custom curve with a cubic Bézier. It has four points: a fixed start at (0, 0), a fixed end at (1, 1), and two control points you can move. In CSS it's written cubic-bezier(x1, y1, x2, y2).

The first control point shapes how the motion begins; the second shapes how it ends. Pull the first handle to the right along the bottom and the motion starts slowly. Pull the second handle to the left along the top and it ends slowly. The CSS keyword ease-in-out is cubic-bezier(0.42, 0, 0.58, 1), two handles pulled toward the middle.

The x values must stay between 0 and 1, because time can't go backward. The y values can go outside that range. A y value above 1 makes the motion overshoot the target and come back, which gives a lively, springy feel. A y value below 0 makes it pull back first, a small anticipation.

Try dragging the handles in the playground's curve editor and watch the onion skin respond.

Bounce

A bounce eases toward the end value, hits it, rebounds a shorter distance, hits again, and settles. It mimics a dropped ball. Because it hits the end value several times, one Bézier curve can't describe it. Animation software builds bounces from keyframes or uses a dedicated bounce function.

Use bounce sparingly. On a cartoon ball or a playful notification badge it adds character. On a menu or a dialog box it gets tiring fast, and people who use an interface all day will notice it every time.

Elastic

Elastic easing overshoots the target, swings back past it, and oscillates with decreasing size until it settles, like a spring. It reads as energetic and a little rubbery. It suits playful entrances and character motion, and it rarely suits anything a user needs to read quickly.

Watch out for properties that can't overshoot. Opacity above 1 does nothing, and scale below 0 flips an object. Check the extremes when you apply elastic easing to anything but position.

Easing per segment

When an animation has more than two keyframes, easing usually applies to each segment separately. With three keys and ease-in-out, the object slows to a near stop at the middle key before moving on. That's right for a deliberate pause and wrong for a smooth arc through a point.

For a smooth pass through a middle key, use ease-in on the first segment and ease-out on the last, or linear through the middle, or let the software build a continuous curve through all keys (often called auto or smooth tangents). CSS applies the timing function per keyframe interval, so the same rules apply on the web.

Choosing durations

Easing and duration work together. The same curve looks sluggish at two seconds and snappy at 200 milliseconds. Character animation is timed in frames and usually runs longer; interface motion is usually short. The frame rates and timing guide has starting points for both.

A quick exercise

Animate a square sliding across the screen four times: linear, ease-in, ease-out and ease-in-out, with the same duration. Watch each one with onion skin. Then make a custom Bézier that starts fast and overshoots slightly at the end, around cubic-bezier(0.2, 0.9, 0.3, 1.2). That curve is a good starting point for anything that should feel quick and friendly.

Questions

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

Ease-in starts slowly and speeds up, so it suits things leaving the screen or starting to fall. Ease-out starts fast and slows down, which suits things arriving and coming to rest. Ease-in-out combines both and works for moves from one resting position to another.

What do the four numbers in cubic-bezier mean?

They are the x and y coordinates of two control points. The curve always starts at 0,0 and ends at 1,1. The first point shapes the start of the motion and the second shapes the end. Y values above 1 or below 0 create overshoot.

Why can't a cubic-bezier make a bounce?

A cubic-bezier curve can overshoot only once at each end, while a bounce needs several hits and rebounds. In CSS you can build a bounce from multiple keyframes or approximate it with the linear() function and a list of points.

Further reading: MDN: easing-function (CSS)