CSS Transition & Easing Visualizer - Live Timing Curve Editor

How to use this tool

1. Choose one or more transition properties, or keep all selected for the default.
2. Select an easing preset, edit or drag cubic-bezier points, or configure steps() and its jump position.
3. Set duration, base delay, and an optional stagger interval and item count.
4. Use the transform-only preview to check the timing, then copy the generated CSS.

CSS transition syntax

transition: property duration timing-function delay;

This visualizer lets you select one or more properties. Each selected property receives the chosen duration, timing function, and base delay, and the generated declaration separates those transitions with commas. For example, selecting opacity and transform at the defaults produces transition: opacity 300ms ease, transform 300ms ease;. The default all option is exclusive: selecting a specific property clears it, and clearing the last specific property returns to all.

The Play control is a compact timing demo that always moves a box with transform. The generated property list can target other properties, so the preview shows the selected easing, duration, and delay while the output remains the source to copy into your own rule. Try opacity for a fade or combine it with transform for a fade-and-move effect.

Common timing functions

Custom curves and steps

A cubic Bézier easing curve fixes its endpoints at (0, 0) and (1, 1); X1, Y1, X2, and Y2 move its two control points. The X coordinates must remain between 0 and 1 so CSS can find one output for each input progress. The editor allows Y values from −2 to 2, which makes curves with overshoot and undershoot visible in the plot. Drag P1 or P2, enter numeric coordinates, or use the arrow keys after focusing a point. The Material standard preset uses cubic-bezier(0.2, 0, 0, 1); Ease-out back uses cubic-bezier(0.34, 1.56, 0.64, 1), where the Y1 value above 1 creates a brief overshoot.

Choose steps(n, jump-*) when motion should move in distinct increments, such as a frame-by-frame sprite or a segmented indicator. jump-start makes the first rise at the start, jump-end makes the last rise at the end, jump-none keeps rises inside the interval, and jump-both adds jumps at both endpoints. CSS requires at least two steps for jump-none; the control enforces that rule. The curve plot draws these as horizontal and vertical segments. Named easing curves and custom cubic curves stay continuous, while a steps curve intentionally jumps at its boundaries.

Performance tip

For the best animation performance, only transition transform and opacity. These properties are composited on the GPU and do not trigger layout or paint. Avoid transitioning width, height, top, or margin, which cause reflows.

Which properties can be transitioned?

Not all CSS properties are transitionable. Properties must have interpolatable values - i.e., the browser must know how to compute intermediate values between the start and end states.

Transitionable: opacity, transform, color, background-color, width, height, margin, padding, font-size, border-width, box-shadow, filter.

Not transitionable: display (cannot transition between none and block), visibility (but can be delayed with transition-delay), font-family (discrete value).

Workaround for display: none: Animate opacity from 1 to 0, then set visibility: hidden afterward using a transition delay:

.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s; /* visibility changes after opacity finishes */
}

Staggered transitions

To create sequential changes in a list, enter a nonzero stagger interval and choose the item count. The generated snippet keeps the transition declaration, then adds one transition-delay override for each .item. Each delay is the base delay plus the interval multiplied by the item's zero-based position. With a 100ms interval and no base delay, the first three items receive 0ms, 100ms, and 200ms. With a 50ms base delay, those values become 50ms, 150ms, and 250ms.

transition: opacity 300ms ease;

.item:nth-child(1) {
  transition-delay: 0ms;
}
.item:nth-child(2) {
  transition-delay: 100ms;
}
.item:nth-child(3) {
  transition-delay: 200ms;
}

A zero interval leaves the output as a simple transition declaration. Keep in mind that a transition only runs when the property's value changes, and some properties such as display do not interpolate between their values. For interface performance, transform and opacity are usually better choices than layout properties such as width or height.