CSS Transition Generator

Your button needs a hover effect: background color fades over 200ms, transform scales up over 150ms with a slight delay, and box-shadow appears over 300ms with ease-out. That’s three separate transition values in one shorthand, each with different durations, delays, and timing functions. Getting the comma-separated syntax right by hand — transition: background-color 200ms ease, transform 150ms ease 50ms, box-shadow 300ms ease-out — is error-prone and hard to visualize.

Why This Generator (Not the Animation Generator)

PureDevTools has a CSS Animation Generator for @keyframes-based animations with multiple steps. This tool is specifically for transition — the simpler, property-change-driven animation model. Select properties from a list, set duration/delay/timing per property, preview the hover effect live, and copy the shorthand. Everything runs in your browser; no data is sent anywhere.

What Is a CSS Transition?

CSS transitions are the simplest way to add motion to your UI. Unlike @keyframes animations, transitions activate automatically when a CSS property value changes — typically on :hover, :focus, or a JavaScript class toggle.

How to Use This Tool

1. Choose a preset — start with Fade, Slide, Color Shift, Expand, All Props, or Shadow Glow
2. Select the property — pick from a list of common CSS properties (opacity, transform, background-color, color, width, height, and more), or enter a custom property name
3. Set the duration — use the slider or number input; toggle between ms and s
4. Pick a timing function — ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, or cubic-bezier with custom control points
5. Set the delay — add a delay in ms or s before the transition begins
6. Add more transitions — click “Add” to stack multiple properties in one transition declaration
7. Watch the live preview — hover or click the preview element to see the transition in action
8. Copy the output — copy the full .element { transition: ... } block or just the value

The transition Property

The transition shorthand combines four individual properties:

.element {
  transition: property duration timing-function delay;
}

Example:

.button {
  transition: background-color 300ms ease 0s;
}

.button:hover {
  background-color: #6366f1;
}

When the element gains :hover, the browser smoothly interpolates background-color over 300ms using the ease curve.

Individual Longhand Properties

Timing Functions Explained

The transition-timing-function controls how the property value changes over the duration:

Tip: ease-out works well for elements that slide in from off-screen — they arrive quickly and settle gently. ease-in-out is ideal for elements that expand and contract.

Multiple Transitions

You can transition multiple properties at once by separating them with commas:

.card {
  transition:
    background-color 250ms ease,
    box-shadow 200ms ease-out 50ms,
    transform 300ms ease-in-out;
}

This allows each property to have its own duration, timing function, and delay — giving you fine-grained control over complex hover effects.

Which Properties Can Be Transitioned?

Not all CSS properties support smooth interpolation. The browser can smoothly transition numeric and color values, including:

Cannot be smoothly transitioned: display, position, z-index (integer), font-family, content.

Performance: Stick to transform and opacity

For smooth 60 fps transitions — especially on mobile — prefer animating only:

• transform — handled by the GPU compositor thread, no layout recalculation
• opacity — also compositor-accelerated

Transitioning width, height, top, left, or background-color triggers layout and/or paint on every frame. This is usually fine for simple UI interactions, but avoid it in complex animations or on low-end devices.

Use will-change as a hint when needed:

.element {
  will-change: transform, opacity;
}

Use will-change sparingly — overusing it wastes GPU memory.

transition: all

transition: all 300ms ease is convenient but can cause unintended transitions on properties you didn’t plan to animate. Prefer explicit property names:

/* Prefer explicit */
.element {
  transition: background-color 300ms ease, transform 300ms ease;
}

/* Avoid in complex UIs */
.element {
  transition: all 300ms ease;
}

Transition vs Animation: When to Use Which

Frequently Asked Questions

What is the default transition behavior if I only set transition-duration? The default values are: transition-property: all, transition-timing-function: ease, transition-delay: 0s. So transition-duration: 300ms alone transitions all properties with ease timing and no delay.

How do I trigger a CSS transition with JavaScript? Add or remove a CSS class that changes the property value. The browser automatically plays the transition:

element.classList.add('is-visible'); // triggers opacity transition from 0 to 1

Can I use negative transition-delay? Yes. A negative delay starts the transition partway through — as if the specified time has already elapsed. For example, transition-delay: -100ms with transition-duration: 300ms starts the transition at the 100ms mark, appearing to run for only 200ms.

Why doesn’t my transition work on display: none? display is not interpolable — it switches instantly from none to block with no in-between states. Use opacity + visibility together instead, or max-height from 0 to a fixed value.

Can I transition to/from auto values like width: auto? No. The browser cannot interpolate auto because it has no numeric baseline. Use max-width: 0 → max-width: 500px or JavaScript to set explicit pixel values before transitioning.

How do I create a staggered transition effect? Apply increasing transition-delay values to each element using CSS custom properties or nth-child selectors:

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