Riff - CSS Easing Curve Editor

Understanding CSS Easing Curves

Easing curves control the rate of change during a CSS transition or animation. Instead of moving at a constant speed (linear), an eased animation can start slowly and accelerate, decelerate toward the end, or combine both behaviors. This subtle difference transforms mechanical motion into something that feels natural and polished.

In CSS, easing is defined with the transition-timing-function or animation-timing-function property. The most flexible option is cubic-bezier(x1, y1, x2, y2), which describes a curve using two control points on a unit coordinate system. The browser interpolates values along this curve over the specified duration, giving you precise control over acceleration and deceleration.

How Cubic Bezier Works

A cubic Bezier curve has four points: a fixed start at (0, 0), a fixed end at (1, 1), and two movable control points that shape the curve between them. The x-axis represents time progression (0% to 100% of the duration), while the y-axis represents the output value progression. When the curve is steep, the animation moves quickly during that portion of time; when the curve flattens, the animation slows down.

The x-coordinates of the control points must stay between 0 and 1 (they represent time), but the y-coordinates can exceed this range. Values above 1 or below 0 create overshoot effects - the animation temporarily goes beyond its target before settling, producing bouncy or elastic motion.

Built-In Easing Keywords

CSS provides several easing keywords that map to specific cubic-bezier values. ease (the default) corresponds to cubic-bezier(0.25, 0.1, 0.25, 1.0) and produces a gentle acceleration with a smooth deceleration. ease-in starts slowly, ease-out ends slowly, and ease-in-out does both. linear maintains constant speed throughout. These keywords are convenient starting points, but a CSS easing curve editor like Riff lets you go further by visually tuning the exact curve shape.

Choosing the Right Easing

The best easing curve depends on the type of interaction. Entrances typically benefit from ease-out curves (fast start, gentle landing), while exits work well with ease-in (gentle start, quick departure). Hover effects and micro-interactions often use snappy custom curves with short durations (150–300ms). For more on timing functions and best practices, see the MDN documentation on CSS easing functions.

Use the Riff editor above to experiment with different curves and see the results in real time. Drag the control handles, try the presets, and compare your custom curve against linear motion to develop an intuition for how each curve shape affects perceived motion.