Read the curve
The horizontal axis is time; the vertical axis is progress. The curve starts at (0, 0) and ends at (1, 1). Its two middle control points determine how quickly the animated value accelerates and settles.
X control points stay between 0 and 1 so the function remains valid CSS. Y control points can move beyond that range to create overshoot. Use overshoot sparingly for functional controls and keep important content readable throughout the transition.
Apply it to a real interaction
Paste the output onto the element whose transform changes. A curve alone does not create movement: define an initial transform and a different transform for the active state. The tool previews a deliberately initiated transition rather than an endless loop.
Explore interactive UI motion