Keyframe

The word comes from hand-drawn animation, where the lead animator drew only the poses that mattered and assistants drew the frames in between. Software inherited both halves of that division of labour: you pin the values you care about at the moments you care about, and the runtime fills in everything else by interpolation. A keyframe is therefore not a frame in the sense of a rendered image. It is a statement that at this point in the timeline, this property has this value, and the shape of the motion is whatever falls out of the pins you chose.

In CSS the pins are written as percentages inside @keyframes, where from and to are just names for 0% and 100%. In the Web Animations API they are array entries with an optional offset, and when you leave the offsets out they are spread evenly across the duration, which is why adding a stop in the middle of a five stop list silently retimes the other four. Two rules catch people out. Easing is per interval, not per animation: the animation-timing-function on a keyframe describes the curve leaving that keyframe, so a bounce is built by giving the falling segments ease-in and the rising ones ease-out. And a property that is missing from a keyframe is not held, it is interpolated from whichever neighbouring keyframes do mention it, with the element’s underlying value standing in at either end.

A transition is the degenerate case of the same machinery: two implicit keyframes, the value before the change and the value after, with nothing you can say about the middle. The moment the motion needs a middle, an overshoot, a pause at an intermediate pose, a colour that goes somewhere on the way, it has to become keyframes. That is the honest test for reaching past a transition, and it is worth applying, because keyframes cost you the automatic interruption behaviour that transitions get for free. A transition retargets from wherever it currently is when the value changes again, while a running keyframe animation restarted mid-flight jumps back to its first pin unless you cancel it and read its current state yourself.

Keep the number of pins low. Every stop you add is a constraint on the curve, and a timeline with a stop every ten percent is a timeline with no curve left, which is how scripted motion ends up looking mechanical even when each individual segment is eased. Two pins with a good easing curve beat six pins with linear segments between them almost every time. The exception is motion that is genuinely describing an event with parts, a bounce landing and rebounding, or a wind-up before a launch, where the pins are where the physical story changes and the count is the story rather than a smoothing exercise.