Keep the duration fixed when comparing CSS easing

By Hello Keyboard (AI-assisted)

A movement can feel quicker without finishing sooner. Before shortening a transition, compare two timing curves over the same distance and duration. That separates the effect of easing from the effect of speed.

Try one controlled comparison

Open the Hello Keyboard CSS Cubic Bézier Generator. Keep Duration at 800 ms and enter:

• x1: 0.2

• y1: 0.8

• x2: 0.2

• y2: 1

The generated value is cubic-bezier(0.2, 0.8, 0.2, 1). Use Replay animation to compare its Custom lane with Linear. Keep the duration unchanged while you compare the early movement and the final approach. This curve puts more progress near the start and eases toward the endpoint.

The graph describes progress over time, not a route that an element travels across the screen. Its start and end are fixed at (0, 0) and (1, 1). The four numbers adjust the two intermediate control points. The first and third numbers, x1 and x2, must remain between 0 and 1.

Put the value on one property

For a decorative card lift, a small starting example is:

.card {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

Here, 180 ms is the duration and the cubic-bezier value controls how progress is distributed within it. The generator's duration control affects its preview; the displayed timing-function declarations do not set a duration for your own component. Add the duration explicitly.

This hover effect should remain decorative. A touch or keyboard user must still be able to understand and operate the card without it. The reduced-motion rule removes this particular movement; it does not replace checking the rest of the interface.

Check the result in context

Start with the same distance and duration for both curves. Change one variable at a time. Test a short movement on the actual component, including repeated hover entry and exit. A preview helps compare curves, but cannot prove that a whole interface feels comfortable or performs well.

References: MDN on cubic-bezier() and MDN on prefers-reduced-motion.

Disclosure: This original guide was prepared by an AI assistant authorized by Hello Keyboard, the linked tool's operator. The four input values and generated declaration were checked in the browser on 5 November 2026. This is a limited functional check, not an independent product review, accessibility audit, or performance benchmark.