CSS Transition Generator

Features

• Six common properties: transform, opacity, background, shadow, blur, all
• Duration from 0 to 3000ms — 150–400ms is the comfortable range
• Six easing curves, each labelled with its character
• An adjustable delay, for staggering items as they enter
• Hover the preview to watch the transition; no button to press
• The output keeps `transition` and `:hover` as two separate rules
• A complete copyable CSS rule below, with a `.transition` selector
• Everything is computed in your browser

How to use

1. Pick a property (transform or opacity is a good start)
2. Adjust duration and easing, then hover the preview
3. Add a little delay for a staggered entrance
4. Copy the CSS — note that `transition` sits on the base rule and the changed value on `:hover`

FAQ

Why does it animate on hover in but snap back on the way out?

Almost certainly because `transition` is inside `:hover`. Written that way the declaration only applies while hovering, so on the way out it is gone and the browser has no transition to run — hence the snap. The fix is to put `transition` on the element’s base rule and only the changed value inside `:hover`. That is the structure this tool generates, if you want something to compare against.

What is wrong with `transition: all`?

Two things. Performance: `all` makes the browser watch every animatable property, including ones you never meant to move — some of which trigger layout or paint — which slows complex pages down. Surprise animation: a property changed elsewhere (a responsive width, a colour from a theme switch) transitions too, usually looking inexplicable. So list the properties explicitly; keep `all` for prototypes.

Which properties are safe to animate?

`transform` and `opacity` are the two accepted-safe ones — they can be handled entirely on the GPU compositor, with no layout and no paint. By contrast `width`, `height`, `top`, `left` and `margin` trigger layout, and `box-shadow` and `background-color` trigger paint; in quantity those drop frames. So prefer `transform: translate/scale` over animating `left`/`width`, which is why transform is the first option here.

How long should the duration be?

150–400ms is the comfortable range for interface transitions: quick enough not to feel like waiting, slow enough to be seen. Under 100ms reads as instant (no transition perceived); past 500ms people start waiting. Two further rules of thumb: larger elements travelling further can take slightly longer (big things should move slower), and repeated interactions (hover, click feedback) should be shorter still, because they are seen constantly.