CSS Easing Functions: cubic-bezier() and steps()

Two animations can share a duration and distance yet feel completely different. Easing determines where time is spent along the journey: accelerating, settling, moving evenly, or jumping between discrete poses. It should explain movement rather than decorate every property with the same curve.

Build a neutral easing test

Use a single object on a visible track. Create its shape with the border radius generator, export the radius, and leave that shape unchanged while testing motion. This removes a distracting variable. You are comparing velocity profiles, not deciding whether a rounder card looks friendlier.

Set a reference travel distance, such as 160 pixels, and compare curves at the same duration. Then test a second distance that resembles the real component. A curve that looks expressive in a large demo can feel like hesitation in a tiny control.

Include a linear reference and a nonanimated final state. Ask observers when the object seems to start responding and when it seems settled. Those two judgments can differ from the technical start and end timestamps, especially when the last part of a curve moves only a fraction of a pixel.

Understand what a cubic curve controls

In cubic-bezier(x1, y1, x2, y2), the horizontal axis represents normalized time and the vertical axis represents normalized progression. The start and end points are fixed. The two control points shape the curve; they are not positions through which the moving element must pass.

The x values must stay between zero and one for a valid CSS timing function. The y values may extend beyond that interval, allowing overshoot. That does not mean every property can visibly overshoot: opacity, for example, is constrained to its allowed range.

:root {
--ease-enter: cubic-bezier(.16, 1, .3, 1);
--ease-exit: cubic-bezier(.4, 0, 1, 1);
}
.demo {
transform: translateX(0);
transition: transform 240ms var(--ease-enter);
}
.demo[data-position="end"] {
transform: translateX(160px);
}

This is a test fixture, not a universal entrance recipe. The curve approaches its destination gently, which can suit something arriving into view. For exact definitions and keyword equivalents, use the MDN easing reference.

Remember that easing remaps progression across a duration. It does not add physical mass or automatically respond to release velocity. If the design requires a genuine spring that continues from a drag gesture, a fixed cubic curve may be an inadequate model.

Match easing to the movement's job

An entrance often benefits from early response and a controlled arrival. An exit can accelerate away because users rarely need to study its final offscreen position. A continuously rotating indicator usually needs linear timing so it does not appear to stall once per revolution.

These are starting hypotheses, not rules about every interface. A reading-progress indicator should track scroll position faithfully; adding a leisurely easing curve can make it misrepresent location. A carousel controlled directly by a finger should follow that finger rather than apply an unrelated decorative curve.

Evaluate distance and duration together. A 300-millisecond effect over eight pixels can feel mushy, while the same time over a large panel may feel brisk. First remove unnecessary travel. Then adjust duration. Finally tune the curve. Reversing that order often leads to elaborate easing that tries to disguise an oversized movement.

Use the same visual endpoints when collecting feedback. Compare one variable at a time and write down the chosen values. The design tokens guide is useful when those decisions need shared names, but avoid creating a large taxonomy before real components justify it.

Use steps for intentionally discrete motion

The steps() timing function divides progression into jumps. It is useful for sprite sheets, mechanical counters, and deliberately frame-based illustrations. It is usually a poor substitute for smooth motion when the goal is continuous tracking.

@keyframes tick {
to { transform: rotate(360deg); }
}
.dial {
animation: tick 12s steps(12, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
.dial { animation: none; }
}

In this example, the dial advances in twelve increments. Inspect the loop boundary carefully: a complete rotation returns to the original orientation, while a sprite strip can accidentally display an extra frame if its end position is calculated incorrectly. The jump position also determines whether an immediate change happens at the start.

For frame sequences, calculate offsets from actual asset dimensions rather than guessing with percentages. A strip with twelve cells and a background viewport one cell wide has different endpoint considerations from rotating a continuous object. Consult MDN's steps documentation before copying a sprite recipe.

Do not apply stepped timing to essential reading content just to imitate a typewriter. It can postpone comprehension and create confusing selection or announcement behavior. Keep the complete message available independently of its decorative presentation.

Test interruption and motion sensitivity

A curve is not finished when a looping playground looks good. Trigger it twice quickly, reverse it midway, and resize its container. Watch for a dead interval where the interface has accepted input but nothing seems to happen. A delay and a slow-start curve can accidentally compound this problem.

Check where overshooting objects can go. A scaled card may overlap a neighboring button; an overshooting drawer may expose a blank edge. Clipping can hide the excess, but it can also cut off shadows and focus indicators. Solve the geometry intentionally rather than masking every symptom with overflow rules.

Use prefers-reduced-motion documentation to create a less spatial alternative. A preference should influence the whole movement, not just reduce duration so aggressively that an overshoot becomes a flash.

Review the result with the same spacing and elevation used in production. The box shadow generator can supply a static reference shadow, but avoid animating its blur during the easing comparison. That additional rendering and visual change makes diagnosis harder.

Keep a small motion specification with duration, distance, curve, trigger, and interruption behavior. Record why the choice fits the task. This gives reviewers a concrete basis for deciding whether a future adjustment improves response or merely makes the demo more noticeable.

Key takeaways

• Tune response and settling rather than choosing curves by name alone.
• Match easing to entrances, exits, tracking, and continuous loops.
• Use steps only when discrete frames communicate the intended behavior.
• Validate interruption, clipping, and reduced-motion alternatives.