Two motions with the same duration can feel completely different. One feels mechanical, the other natural. The difference is easing: how the speed changes along the way. This lesson explains easing in plain terms and shows how to choose and shape it.
What an easing curve is
An easing curve maps time to progress. The horizontal axis is time, from start to end; the vertical axis is how far the motion has got. A straight diagonal line is linear: the same speed all the way. A curve that rises steeply then flattens is ease out: fast at first, then a soft landing.
Real objects rarely move at a constant speed. They speed up, slow down, overshoot. Easing is how CSS imitates that.
Open the easing editor
Open a motion that has an Easing setting, such as most entrances. Press the small curve next to Easing. A panel opens with:
- The curve, with two handles you can drag
- A dot that runs the curve, so you see the speed, not only the shape
- The presets, 14 of them
- The text box, with the CSS timing function, which you can also type into
The presets and when to use them
| Preset | Feels like | Use it for |
|---|---|---|
| Linear | The same speed all the way | Spinners, scrolling backgrounds |
| Ease | Quick start, soft landing | The browser default; fine for most |
| Ease in | Starts slow, leaves fast | Things going away |
| Ease out | Starts fast, lands softly | Things arriving |
| Ease in-out | Slow at both ends | Moving from one place to another |
| Smooth | A stronger in-out | Calm, deliberate moves |
| Expo out | Shoots in and glides to a stop | Modern UI: menus, panels, toasts |
| Snappy | Quick and decided | Small UI changes: toggles, tabs |
| Back out | Overshoots a little, then settles | Playful arrivals |
| Back in-out | Pulls back, overshoots, settles | Emphasis |
| Anticipate | Winds up backwards before it goes | Cartoon energy, a launch |
| Spring | Overshoots and wobbles to rest | Elements that should feel physical |
| Wobbly | A looser spring | Fun, informal interfaces |
| Bounce | Drops and bounces like a ball | A landing, a drop-in |
The rule of thumb: ease out for things arriving, ease in for things leaving, ease in-out for things moving across. Linear only for things that never stop, like a spinner.
Shape your own
Drag either handle. The text box shows the new cubic-bezier(x1, y1, x2, y2) and the dot runs it at once. Pull a handle above the top of the box and the motion overshoots; below the bottom and it pulls back first.
You can also paste any timing function into the text box, such as one from a design spec, and see it drawn.
Springs and bounces: CSS linear()
A cubic-bezier has only two handles, so it can overshoot once but cannot wobble or bounce. Spring, Wobbly and Bounce are written with CSS linear(), a list of points that traces any curve:
animation-timing-function: linear(0, 0.25 8%, 1.1 30%, 0.98 55%, 1);Motion Studio samples a real spring or a real bounce into those points, so you get physical motion in plain CSS. linear() works in all current browsers.
Check it slowly
Set the stage speed to 0.25× (lesson 3) and watch the dot and the motion together. Easing that feels "off" at full speed is usually obvious at a quarter: a stop that is too abrupt, an overshoot that is too big.
Next: taking the motion into your code.