🎞️ CSS Transition Generator with Live Easing Preview
By Shihab Mia · Updated 2026-07-05
Hover the box, or use the toggle, to see the transition.
Pick a property, duration, timing function, and delay. The preview and CSS update live.
This CSS transition generator builds the exact transition shorthand you need: pick the property, duration, timing function (easing) and delay, then watch a live hover and toggle preview so you can feel the motion before you ship it. When the movement looks right, copy the ready-to-use CSS straight into your stylesheet. A transition smoothly animates a property from one value to another instead of snapping instantly, and this tool removes the guesswork from tuning those numbers.
What is the CSS Transition Generator?
A CSS transition is defined by four pieces: the property it watches, how long the change takes (duration), the rate of change over that time (the timing function or easing), and how long to wait before starting (delay). The shorthand packs them into one line: transition: property duration timing-function delay. For example, transition: transform 0.4s ease-in-out 0s animates any transform change over 400 milliseconds with smooth acceleration and deceleration and no delay. A transition only runs when the property actually changes, usually because of a state like :hover, :focus, a class toggle, or a style set from JavaScript.
The timing function shapes how the value moves between start and end. The named keywords cover most needs: linear holds a constant speed, ease (the default) starts slow, speeds up, then slows down, while ease-in and ease-out accelerate or decelerate at one end only. For full control you use cubic-bezier(x1, y1, x2, y2), which defines a curve through two control points. The x values must sit between 0 and 1, but y can go beyond that range, and a y value above 1 lets the animation overshoot and spring back, which is how playful back and bounce effects are built. There are also stepped functions, steps(n) and the step-start and step-end keywords, which jump in discrete chunks rather than gliding, handy for sprite animation and typewriter effects.
Duration and delay are times, written in seconds (0.4s) or milliseconds (400ms); the two units are interchangeable, so 0.4s and 400ms mean exactly the same thing. Order matters in the shorthand: the first time value is always the duration and the second is the delay, so transition: opacity 0.2s 1s waits one second and then fades over 0.2 seconds. Not every property can be transitioned: only animatable properties such as transform, opacity, color, background-color, width and box-shadow respond, while properties like display do not interpolate between an old and a new value.
Using the property keyword all transitions every animatable property at once, which is convenient but can animate things you did not intend and costs a little extra work, so naming the exact property is usually the cleaner choice. You can also list several transitions on one element by separating them with commas, for example transition: transform 0.3s ease-out, opacity 0.2s linear, which gives each property its own duration and easing. This is the standard way to fade and move an element at slightly different speeds so the motion feels layered rather than mechanical.
For the smoothest results, prefer animating transform and opacity. Browsers can composite those two properties on the GPU without recalculating layout or repainting the page, so they stay at a steady 60 frames per second even on lower-powered devices. Animating width, height, top, left or margin forces a layout reflow on every frame and is the most common cause of janky, stuttering motion, so reach for transform: translate() and transform: scale() instead of moving or resizing boxes directly.
One accessibility rule matters here: some users set their system to reduce motion because animation can trigger dizziness or nausea. You can honour that with the prefers-reduced-motion media query, wrapping large or looping transitions so they shorten or switch off for those users. A short, purposeful transition on a button is usually fine, but sweeping slide-ins and parallax should respect the setting. Building motion that degrades gracefully is part of shipping a transition responsibly, not an optional extra.
When to use it
- Adding a smooth hover effect to buttons, cards or links without writing keyframes.
- Tuning the easing and duration of a UI animation visually instead of guessing numbers.
- Building a cubic-bezier overshoot or bounce effect and copying the exact curve values.
- Fading and moving an element at once by generating a comma-separated multi-property transition.
- Teaching or demonstrating how duration, easing and delay change the feel of a transition.
- Prototyping micro-interactions for a design system so the same timings are reused everywhere.
How to use the CSS Transition Generator
- Choose the property you want to animate (or all to animate everything).
- Drag the duration slider to set how long the change takes, in milliseconds.
- Pick a timing function, including ready-made cubic-bezier presets for spring and bounce.
- Optionally add a delay so the transition waits before it starts.
- Hover the preview box or press the toggle to play it, then copy the generated CSS.
Formula & method
Worked examples
You want a card to lift smoothly on hover by scaling up over 300 ms with gentle easing.
- Property: transform (so only the scale animates)
- Duration: 300ms, written as 0.3s in the shorthand
- Timing function: ease-out, so it starts fast and settles gently
- Delay: 0ms (none)
- Shorthand becomes: transition: transform 0.3s ease-out
Result: transition: transform 0.3s ease-out; paired with transform: scale(1.05) on :hover.
You want a playful button that overshoots and springs back when its background changes.
- Property: background-color
- Duration: 500ms, written as 0.5s
- Timing function: cubic-bezier(0.34, 1.56, 0.64, 1), whose y2 above 1 causes the overshoot
- Delay: 100ms, written as 0.1s, so it starts just after the click registers
- Shorthand becomes: transition: background-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s
Result: transition: background-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
You want a menu item to fade in and slide up together, with the fade slightly faster than the move.
- First transition: opacity 0.2s linear for a quick, even fade
- Second transition: transform 0.3s ease-out for the upward slide
- Separate the two with a comma so each keeps its own duration and easing
- Pair with transform: translateY(8px) and opacity 0 on the hidden state
Result: transition: opacity 0.2s linear, transform 0.3s ease-out;
Common timing functions and how they feel
| Timing function | Behaviour | Good for |
|---|---|---|
| linear | Constant speed start to finish | Spinners, progress bars, marquees |
| ease | Slow start, fast middle, slow end (default) | General purpose, most UI |
| ease-in | Slow start, accelerates to the end | Elements leaving or exiting |
| ease-out | Fast start, decelerates to a stop | Elements entering or appearing |
| ease-in-out | Slow at both ends, fast in the middle | Looping or back-and-forth motion |
| cubic-bezier(...) | A custom curve you define | Springy, bouncy or bespoke easing |
| steps(n) | Jumps in n discrete steps | Sprite sheets, typewriter effects |
Reading the transition shorthand
| Position | Part | Example value |
|---|---|---|
| 1st time value | Duration | 0.4s or 400ms |
| 2nd time value | Delay | 0.1s or 100ms |
| Keyword or curve | Timing function | ease-in-out |
| Property name | What is animated | transform |
Cheap vs expensive properties to animate
| Property | Cost per frame | Recommendation |
|---|---|---|
| transform | Composite only (GPU) | Preferred for moving and scaling |
| opacity | Composite only (GPU) | Preferred for fading |
| color / background-color | Repaint | Fine for small elements |
| box-shadow | Repaint | Use sparingly, can be heavy |
| width / height / top / left | Layout reflow | Avoid, use transform instead |
| display | Not animatable | Cannot transition, use opacity |
Common mistakes to avoid
- Putting the transition on the hover state only. Declare the transition on the base selector, not just :hover. If it lives only in :hover, the element animates in but snaps back instantly when the pointer leaves, because there is no transition defined on the resting state.
- Trying to transition a non-animatable property. Properties like display do not interpolate, so a transition on them has no smooth effect. To fade something out you animate opacity (and optionally visibility), not display none.
- Forgetting which time value is the delay. In the shorthand the first time you write is the duration and the second is the delay. transition: opacity 0.2s 1s waits one second then fades over 0.2 seconds, which is easy to read backwards.
- Using all when you mean one property. transition: all animates every changing property, which can pick up unintended changes and do more work than needed. Naming the specific property keeps the effect predictable and a little faster.
- Animating width, height or position instead of transform. Transitioning width, height, top or left forces the browser to recalculate layout on every frame, which stutters. Use transform: scale() and transform: translate() instead, since they animate on the GPU without a reflow.
- Ignoring users who prefer reduced motion. Large or looping transitions can cause discomfort. Wrap them in a prefers-reduced-motion: reduce media query so the animation shortens or turns off for people who have asked their system to limit motion.
Glossary
- Transition
- A CSS feature that animates a property from its old value to a new one over a set time when the value changes.
- Duration
- How long the transition takes to complete, written in seconds (0.4s) or milliseconds (400ms).
- Timing function
- The easing curve that controls the rate of change over the duration, such as ease, linear or a cubic-bezier.
- Delay
- How long the browser waits after the trigger before the transition begins.
- cubic-bezier
- A timing function defined by two control points, cubic-bezier(x1, y1, x2, y2), letting you draw a custom easing curve.
- Animatable property
- A CSS property whose values can be interpolated, such as transform, opacity or color. Properties like display cannot.
- Easing
- The overall shape of speed across a transition, another name for the timing function, that makes motion feel natural rather than robotic.
- prefers-reduced-motion
- A media query that detects when a user has asked their system to minimise animation, so you can shorten or disable transitions for them.
Frequently asked questions
What is a CSS transition?
A CSS transition smoothly animates a property between two values over time when the value changes, for example fading or scaling an element on hover. It is set with the transition property and runs whenever the watched property changes, usually due to a state like :hover or a toggled class.
What is the difference between a transition and an animation?
A transition runs once, from a start value to an end value, and only when that value changes. A CSS animation uses @keyframes, can have many intermediate steps, can loop, and can play on its own without a state change. Transitions are simpler for hover and state effects; animations suit complex or repeating motion.
Which timing function should I use?
ease is a safe default for general UI. Use ease-out for elements entering the screen and ease-in for elements leaving. Use linear for spinners and progress bars. For springy or bouncy effects use a cubic-bezier with a control point above 1, which makes the animation overshoot and settle.
How does cubic-bezier work?
cubic-bezier(x1, y1, x2, y2) defines an easing curve using two control points. The x values must be between 0 and 1, but y can go beyond that range, which is how you get overshoot and bounce. This generator includes ready-made presets so you can pick a curve and copy its exact values.
Why is my transition not working?
The most common causes are declaring the transition only on the :hover state instead of the base element, trying to transition a property that does not animate (like display), or the property never actually changing. Make sure the transition is on the resting state and the property has a real before and after value.
Should I use seconds or milliseconds?
Both are valid and interchangeable: 0.4s and 400ms mean the same thing. Use whichever reads more clearly to you. This tool lets you set the time in milliseconds and writes the shorthand in seconds, which is the more common style in stylesheets.
How do I transition two properties at different speeds?
List each transition separated by a comma, giving every property its own duration, timing function and delay. For example transition: opacity 0.2s linear, transform 0.3s ease-out fades an element quickly while it slides more slowly, which makes the motion feel layered instead of flat.
What is a good duration for a hover transition?
For most button and card hover effects, 150ms to 300ms feels responsive without being sluggish. Under about 100ms the change looks instant, and over roughly 500ms it starts to feel slow. Larger elements and bigger movements can take a little longer than small colour or opacity shifts.
Which CSS properties are the smoothest to animate?
transform and opacity are the smoothest because browsers can animate them on the GPU without recalculating layout, so they hold 60 frames per second. Avoid transitioning width, height, top or left, which trigger a layout reflow every frame and cause stutter. Use transform: translate() and scale() instead.
How do I respect users who prefer reduced motion?
Wrap non-essential transitions in a @media (prefers-reduced-motion: reduce) block that shortens the duration to near zero or removes the animation. This honours the accessibility setting some users enable to avoid motion sickness, while still keeping small, functional transitions for everyone else.