The short version
- Easing describes how the speed of a movement changes over its duration, rather than staying constant from start to finish.
- Ease-out starts fast and slows down, which suits things entering; ease-in starts slowly and speeds up, which suits things leaving.
- Linear motion, at constant speed, looks mechanical for single moves but is right for continuous loops and rotations.
- A cubic-bezier curve defines any easing with two control points, and values outside 0 to 1 create overshoot.
- Springs describe motion with physical settings such as stiffness and damping, and CSS can approximate them with the linear() function.
On this page
Easing is how the speed of a movement changes while it plays. Without easing, an object moves at one constant speed and stops dead, which looks mechanical. With easing, it accelerates and decelerates the way real things do: a drawer slides out fast and settles, a ball speeds up as it falls. Choosing the right easing is the quickest way to make any animation feel natural.
What easing looks like
Animators draw easing as a spacing chart: where an object sits at equal steps in time. When the marks are evenly spaced, the speed is constant. When they bunch up, the object is moving slowly; when they spread apart, it is moving fast. Here are the four basic easings, each showing eleven equal moments of the same movement from left to right.
The four easings you actually need
CSS names five basic curves, and design tools use the same ideas under similar names. Four of them cover nearly every job. The fifth, ease, is the browser default: a curve that starts fairly fast and settles gently, much like a softer ease-out.
| Easing | CSS curve | Use it for |
|---|---|---|
| Ease-out | cubic-bezier(0, 0, 0.58, 1) | Things entering or appearing: menus, cards, headlines |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) | Things leaving or disappearing |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Things moving from one place to another on screen |
| Linear | cubic-bezier(0, 0, 1, 1) | Continuous loops, rotations, progress bars, background drift |
The logic is physical. Something arriving should already be moving when it appears, then settle, so it eases out. Something leaving should gather speed as it goes, so it eases in. Linear is wrong for a single move, but right for anything continuous: a loop that eases at its ends seems to hesitate every time it repeats, as seamless loops explains.
How cubic-bezier curves work
Every CSS easing curve is drawn between two fixed points, the start (0, 0) and the end (1, 1). A cubic-bezier() adds two control points that bend the curve. The horizontal axis is time and the vertical axis is progress. The time values must stay between 0 and 1, but progress values can go beyond, which makes a movement overshoot its target and come back.
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Exits: shorter and easing in */
.card-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}MDN's reference to easing functions lists every form CSS accepts, including steps() for frame-by-frame movement.
Springs: easing from physics
A spring doesn't use a fixed curve and duration. You describe the physics instead, usually stiffness (how strongly it pulls towards the target), damping (how quickly it calms down) and mass, and the motion follows. Stiff, well-damped springs feel snappy and precise; loose, lightly damped ones bounce. Springs are popular in app interfaces because they respond naturally when a movement is interrupted halfway.
Many animation libraries offer springs directly. In plain CSS, the linear() function can approximate one by listing points along its path, which modern browsers support.
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
transition: transform 500ms
linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}linear() joins the points with straight segments. More points give a smoother curve; generators can calculate them from spring settings.Easing and duration work together
The same curve feels different at different lengths. An ease-out over 150 milliseconds reads as a crisp snap; over 800 it reads as a slow glide. Match both to the distance and the job. Motion design principles has typical durations.
Common mistakes
- Linear motion for a menu or card entering
- Ease-in on things appearing, so they start sluggishly
- The same long duration for small and large movements
- Bouncy overshoot on everything
- Easing at the ends of a continuous loop
Better
- Ease-out for anything arriving
- Ease-in, slightly shorter, for anything leaving
- Short for small moves, longer for bigger ones
- Overshoot saved for small, playful moments
- Linear for loops, so they never hesitate
Easing in JavaScript, design tools and video
The same curves work outside CSS. In JavaScript, the Web Animations API takes a CSS easing string. Design and video tools use the same ideas under names such as ease in, ease out and ease in and out, usually with a graph editor for custom curves and, in many prototyping tools, spring presets.
const card = document.querySelector('.card')
card.animate(
[
{ transform: 'translateY(24px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 },
],
{ duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)Whatever the curve, some people prefer less motion. Honour their setting by shortening or removing movement; reduced motion shows how. And for looping backgrounds, where linear is usually right, see animated gradient backgrounds.
Questions people ask
What is easing in animation?
Easing is the way the speed of a movement changes over its duration. Instead of moving at a constant speed, an eased movement accelerates, decelerates or both, which looks more natural.
What is the difference between ease-in and ease-out?
Ease-in starts slowly and speeds up, which suits things leaving. Ease-out starts quickly and slows down, which suits things entering.
When should I use linear easing?
For continuous motion such as loops, rotations, progress bars and slow background drift. For single movements it looks mechanical.
What does cubic-bezier mean in CSS?
It defines an easing curve with two control points between the fixed start and end. Time values stay between 0 and 1, while progress values beyond that range create overshoot.
What is spring animation?
Motion described by physical settings such as stiffness, damping and mass instead of a fixed curve. CSS can approximate springs with the linear() easing function.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
