A keyframe marks what an animation should look like at a particular point in time. In a web animation, you might set one look at the beginning and a different look at the end. The browser fills in the movement between those points.

Think of drawing a ball at the top and bottom of a bounce; the pictures in between create the motion. In CSS, the `@keyframes` rule describes these moments, which can include a middle point too. Keyframes do not have to be real drawings—they can describe changes in size, color, position, or other visual properties.