How to find the easing of an animation on a website

Duration tells you how long. The easing curve tells you how it feels, and it is the number most people skip. Here is how to read the cubic-bezier, spring or step function behind any motion on a live page.

Updated October 2026 · by the Design Toolkit team

What easing is

Easing describes how quickly the value changes across the duration. The same 300 milliseconds with two different curves are two different animations: one starts fast and lands softly, the other creeps and then snaps. Copy the duration without the curve and your version runs at the right speed and still feels wrong.

The keywords, in numbers

Every CSS keyword is a cubic-bezier in disguise. If you read a keyword, this is what it means:

The curves designers actually use

Most polished interfaces do not use the keywords. They use named curves from the usual easing libraries, and the numbers you read will often match one of them:

A y value above 1 or below 0 is the giveaway for overshoot. That is a spring-like curve, and it is why a copy that ignores it feels flat.

1. Read the timing function

Select the element in the Elements panel. In the Styles panel, find the transition or animation shorthand, or the longhands:

transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-timing-function: ease-in-out;

A transition's curve is on the element's normal rule, not on :hover, so read it there.

2. Open the easing editor

Beside a timing function, DevTools shows a small curve icon. Click it and the curve opens drawn on a grid, with presets to compare against. It is the quickest way to tell a stock curve from a custom one.

3. Check each keyframe

A keyframe animation can set a timing function inside individual keyframes, so each segment has its own curve:

@keyframes pop {
  0%   { transform: scale(0.8); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  60%  { transform: scale(1.05); animation-timing-function: ease-out; }
  100% { transform: scale(1); }
}

The shorthand on the element then only describes the default. Read the keyframes block as well.

4. When the motion is in JavaScript

Libraries built on the Web Animations API leave no CSS to read, but the animation exists on the element:

const a = $0.getAnimations()[0];
a.effect.getTiming().easing;          // the overall curve
a.effect.getKeyframes().map(k => k.easing); // each segment's curve

With an element selected in the Elements panel, $0 is that element. Libraries that move values frame by frame on their own clock, rather than through the Web Animations API, expose no curve at all. For those you sample the value over time and fit a curve by eye, or read the library's own easing name from its options.

Springs, steps and linear()

• steps(4) jumps instead of gliding. It is how sprite sheets and typewriter effects are timed.
• linear(0, 0.25, 1, ...) lists points along the curve. Current browsers support it, and it is how a spring or a bounce is written in plain CSS.
• An overshooting cubic-bezier is the lightweight stand-in for a spring: one overshoot, then settle.

The shortcut

All of the above is a panel, an editor and a console. Design Toolkit shows the easing for the element you select as a curve, next to its duration and keyframes, including animations running through the Web Animations API. Copy for AI writes the timing, easing, keyframes and hover values out as a brief for ChatGPT, Claude or Gemini.

Rebuild it

.panel {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

In Tailwind, the same curve is an arbitrary value: ease-[cubic-bezier(0.16,1,0.3,1)]. As a rule of thumb, things that arrive want an ease-out curve and things that leave want an ease-in one, but copy what you read before you improve on it.

Common questions

Read next