motion score

A 600 ms move can be
90% done in 198 ms.

Duration is only half the story. Change the curve and the same movement can rush, hesitate or overshoot. Freeze the clock. See where each one really is.

198 msFast out reaches 90%
540 msLinear reaches 90%
One clock. Three arrivals.
198 / 600 ms
Fast out / your curve90% position
Linear / constant speed33% position
Ease in / slow departure15% position
Start90%End

Paused at 198 ms. No animation starts until you press Play.

01 / Shape the time

Move a handle.
Change the arrival.

The horizontal axis is elapsed time. The vertical axis is position along the move. A high curve gets most of the distance out of the way early. A curve above 100% travels past the destination.

Drag either solid handle, use its arrow keys, or use the sliders. The dashed line is linear motion. Dot = current clock position.

Preview lanes always show the same relative distance. Export distance changes CSS pixels, not the curve.

198 msfirst reaches 90%
0.0%past the destination
0.0%before the start

90% is a measurement threshold, not a claim about when motion feels complete. All three animations still last the full chosen duration.

02 / Keep the decision

A curve you can hand off.

The contact sheet places seven moments together. Tight spacing means slow movement; wide spacing means fast movement. Export the same settings you see here.

CSS includes a runnable class pair, keyframes and an instant reduced-motion state. SVG is static, uses explicit colors and includes the curve, duration and position of every frame. Edits live in this tab only.


03 / Read the curve
Duration is a deadline.
Linear spends equal time on equal distances. Fast out spends its last two thirds covering only the final 10%. Slow departure holds back early, then catches up. Neither curve changes the finish time.
Overshoot is a choice.
Try Overshoot: the square passes its target and returns. Try Anticipate: it moves backwards before going forwards. Those gestures can add character, but they also add distance and a direction change.
Sources, calculation and motion access
Built 29 October 2026. No external dataset. Every measurement is computed from the displayed cubic curve. Five presets reproduce CSS keyword curves; five are authored examples, not empirical recommendations.
  • W3C CSS Easing Functions Level 1: control points, CSS keywords and input/output progress. x values stay within 0 to 1. y values in this editor range from -0.6 to 1.6.
  • W3C, Animation from Interactions: users need control over nonessential motion. The page starts paused. System reduced-motion disables playback, including when the preference changes while the page is open; manual scrubbing still works. Exported CSS removes the animation and shows its final state under the same preference.
  • Chrome for Developers, CSS scroll-triggered animations: the expansion of CSS motion in 2026 is the practical backdrop. This editor uses established cubic-bezier timing, without depending on new scroll-trigger syntax.
For parameter u, B(u) = 3(1-u)²uP1 + 3(1-u)u²P2 + u³. We invert the x component to find y at each clock time. The first 90% crossing is found over monotone sections of y, split at its derivative roots. Overshoot and anticipation are exact extrema of y on 0 to 1, expressed as percentages of the intended distance. Display values are rounded; exported curve coordinates preserve the controls. Numerical precision is much finer than 0.01 ms.
The opening example is fixed at cubic-bezier(0.16, 1, 0.3, 1), 600 ms. Its first 90% crossing is approximately 197.53 ms, rounded to 198 ms. Editing the score changes its live measurements, not the opening example. Fonts: DM Sans, SIL Open Font License, embedded for offline use.