easeout

Ease-out is a category of easing functions used in animation and user interface motion to describe how a value transitions over time. An ease-out transition begins with a relatively rapid change and gradually slows as it approaches its final value, creating a perception of momentum that comes to rest smoothly.

In practice, time is typically normalized to the interval [0,1], and an ease-out function maps this time to progress. The function starts with a steep slope and ends with a shallow slope, with f(0) = 0 and f(1) = 1. This yields motion that finishes gently rather than abruptly.

Common variants include ease-out quadratic, cubic, and quartic. For example, ease-out quadratic can be expressed as f(t) = 1 − (1 − t)^2, and ease-out cubic as f(t) = 1 − (1 − t)^3. Many systems implement these curves via cubic Bezier definitions or predefined timing functions. In CSS, for instance, the keyword ease-out or its Bezier form defines a decelerating curve; in JavaScript libraries, you may see names like easeOutQuad or easeOutCubic.

Uses and interpretation: ease-out is employed to convey momentum and natural deceleration, improving perceived smoothness in UI components such as panels, modals, and scrolling. It contrasts with ease-in (slow start) and ease-in-out (slow start and end). While it enhances aesthetics, ease-out is a perceptual convenience rather than a physically accurate model of motion.