CSS Transition Generator
Compose a CSS transition declaration without memorizing the shorthand order. Add the properties to animate, set the duration, timing function and delay, then copy the rule.
How to generate a CSS transition
- Add one or more properties to transition, such as opacity or transform.
- Set the duration, timing function and optional delay.
- Copy the transition shorthand into your stylesheet.
Examples
Single property
opacity, 300ms, ease, 0ms
transition: opacity 300ms ease 0ms;
Two properties
opacity and transform, 300ms, ease, 0ms
transition: opacity 300ms ease 0ms, transform 300ms ease 0ms;
Frequently asked questions
Why is each property a separate segment?
The transition shorthand lets you list several comma separated segments, one per property. Writing each property explicitly is clearer than relying on the all keyword and avoids surprises.
Can I use a custom easing curve?
Yes. Enter a cubic-bezier(...) value in the timing field and it is passed straight into the output, so you can paste a curve from a cubic-bezier editor.
Should I transition the all keyword?
You can, but naming specific properties is usually faster because the browser does not have to watch every property for changes. This tool supports both.
What is the difference between duration and delay?
Duration is how long the change takes once it starts, while delay is how long the browser waits before starting. Both are set in milliseconds here.
Is anything sent to a server?
No. The transition string is built entirely in your browser and your settings are never uploaded.
Related tools
Cubic Bezier Generator
Build a custom CSS cubic-bezier() easing curve by dragging two control points. Preview the animation, pick a preset and copy the timing function.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.