In CSS, what do the four numbers in `cubic-bezier(0.68, -0.55, 0.27, 1.55)` represent, and why can a transition using it overshoot its final value?

## What a timing function is A timing function is a pure mapping from *input progress* (how much of the duration has elapsed, 0 to 1) to *output progress* (how much of the value change has been applied). The browser samples it each frame and uses the result to interpolate between the start and end values. Nothing about the property is involved — the same curve drives a colour, a length, or a transform. ## Reading `cubic-bezier()` ```css .card { transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55); } ``` The curve is a cubic Bezier with four control points. The first and last are fixed by the specification at P0 = (0,0) and P3 = (1,1) — at time zero no progress has been made, at the end all of it has. The four numbers you write are P1 = (x1, y1) and P2 = (x2, y2), the two intermediate handles that bend the curve. - **x is time.** x1 and x2 must lie in the closed range 0 to 1. A value outside it makes the whole declaration invalid and it is dropped, because a curve that doubles back horizontally would mean time running backwards. - **y is progress.** y1 and y2 have no restriction. Values between 0 and 1 keep the motion inside its endpoints; values outside push it past them. In the example, y1 = -0.55 pulls the early part of the curve below zero, so the element first eases slightly *away* from its destination — the anticipation you see in cartoon motion — and y2 = 1.55 pushes the late part above one, so it flies past the target and settles back. That single declaration is the whole "back ease" effect. ## The keywords are aliases Every named function has an exact cubic-bezier equivalent: ```text linear = cubic-bezier(0, 0, 1, 1) ease = cubic-bezier(0.25, 0.1, 0.25, 1) ease-in = cubic-bezier(0.42, 0, 1, 1) ease-out = cubic-bezier(0, 0, 0.58, 1) ease-in-out = cubic-bezier(0.42, 0, 0.58, 1) ``` Note that `ease` — the initial value of `transition-timing-function` — is not symmetric: it accelerates fast and decelerates gently. For UI that enters the screen, `ease-out` usually reads better, because motion arriving at rest is what the eye expects; for something leaving, `ease-in`. ## Where overshoot is visible and where it is not Overshoot means the interpolated value temporarily leaves the range between start and end. Whether you see it depends on the property: - `transform` translation, `margin`, `top` and similar accept values beyond the endpoints, so the element visibly passes the target and returns. - `opacity` is clamped to the 0–1 range when used, so an overshooting curve produces no visible bounce at the ends — it just saturates. - Colour channels are similarly clamped to the valid gamut. So "can I get a bouncy fade?" is a fair follow-up, and the answer is no: pick a property whose range is open. ## `steps()` — the discontinuous family ```css .sprite { transition: background-position 1s steps(8, jump-end); } ``` `steps(n, position)` divides progress into `n` equal jumps instead of a smooth curve, which is how sprite-sheet and typewriter effects are built. The position keyword decides where the jumps land: `jump-start` jumps at the beginning of each interval, `jump-end` (the default) at the end, `jump-none` uses `n` values with no jump at either end, and `jump-both` jumps at both. The older keywords `start` and `end` are aliases for `jump-start` and `jump-end`, and `step-start` / `step-end` are shorthands for `steps(1, jump-start)` and `steps(1, jump-end)`. ## `linear()` for arbitrary curves A cubic Bezier cannot express a genuine multi-bounce or spring, because it is a single curve segment. The `linear()` function takes a list of progress stops — `linear(0, 0.5 25%, 0.9 50%, 1)` — and joins them with straight segments, so a spring simulation can be sampled into it. It is widely supported in current browsers and is the honest answer to "how do I do a real bounce in pure CSS". ## What interviewers are checking They want to hear that the curve is time-to-progress, not a path through space; that x is constrained and y is not; that the keywords are aliases rather than special engine behaviour; and that you would reach for `ease-out` over the default `ease` for entering UI. Being able to say "the negative y1 is anticipation" without hand-waving is the mark of someone who has actually tuned motion.