🎞️ CSS Transition Generator
By ToolNimba Web Dev Team · Updated 2026-06-19
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.
A CSS transition smoothly animates a property from one value to another instead of snapping instantly. This generator lets you choose the property to animate, the duration, the timing function (easing) and an optional delay, then shows a live hover and toggle preview so you can feel the motion before you ship it. When it looks right, copy the transition shorthand straight into your stylesheet.
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. Values for y outside the 0 to 1 range let 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. 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. Using the property all transitions every animatable property at once, which is convenient but can animate things you did not intend and costs a little performance, so naming the exact property is usually the cleaner choice. For the smoothest results, prefer transform and opacity, since browsers can animate them on the GPU without triggering layout.
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.
- Teaching or demonstrating how duration, easing and delay change the feel of a transition.
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;
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 |
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.
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.
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.