CSS transition generator — smooth hover effects with the right easing

How to use the CSS transition generator

1. Choose the Property to animate: transform, opacity, background-color, box-shadow, color or all.
2. Set the Duration (50 to 2,000 ms) and, if the change should wait, a Delay.
3. Pick an Easing. Choose Custom cubic-bezier to type your own curve in Custom curve.
4. Hover the Hover me box in the preview. The dot below runs on the same easing so you can see the speed curve.
5. Copy the CSS and replace the sample hover declaration with your own.

What it does and when to use it

A transition animates a property when its value changes, usually between a normal state and :hover, :focus or an added class. It is the simplest way to make buttons, cards and links feel responsive without writing keyframes. Use a transition for two-state changes; for anything that loops or has more than two steps, use the CSS animation generator.

The output always includes a sample hover rule so you can see the effect, for example transform: translateY(-6px) scale(1.04); for transform, or a pink background for background-color.

How it works

The tool builds the transition shorthand in this order: property, duration, timing function, and delay only when it is above zero. Named curves such as Overshoot are written as their cubic-bezier() numbers, and the five CSS keywords stay as keywords. A custom curve must have its first and third numbers (the time values) between 0 and 1; the second and fourth may go outside that range to overshoot.

The block ends with:

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

MDN lists transition as Baseline widely available since September 2015 and the prefers-reduced-motion media feature as widely available since January 2020.

Worked examples

A springy hover lift. transform, 300 ms, Overshoot (easeOutBack): transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); The box rises a little past its target and settles back.

A stepped shadow with a delay. box-shadow, 300 ms, Steps (6), 50 ms delay: transition: box-shadow 300ms steps(6, end) 50ms; The shadow grows in six visible jumps, a retro look.

An invalid custom curve. cubic-bezier(1.2, 0, 0.5, 1) returns “The x values (first and third numbers) must be between 0 and 1.”, because time cannot run backwards or past the end.

Limits and tips

• One property per transition. To animate two, write them comma-separated by hand, for example transform 200ms ease-out, opacity 200ms linear.
• The hover rule is only a sample. Change it to your own end state; keep the transition on the base rule so it also plays when the pointer leaves.
• To design or compare curves in detail, use the cubic-bezier editor. For what to animate, try the transform generator.