Ease In, Ease Out, and Everything Between

CSS easing functions are the same Bézier handles designers already use in the pen tool — they just bend time instead of a shape. The four numbers in cubic-bezier() represent two control point positions: x1,y1 for the handle leaving the start and x2,y2 for the one arriving at the end. The article explains how easing maps to traditional animation timing charts, demystifies the ease-in/ease-out/ease-in-out keywords (showing their exact cubic-bezier equivalents), and gives a practical rule: use ease-out for entrances, ease-in for exits, and ease-in-out for moves between visible positions. It also covers overshooting and windup effects by pushing handles outside the unit square, and closes with the prefers-reduced-motion media query as a non-negotiable baseline.