CSS Transition Generator
What a transition does
A transition animates a property between its old and new value whenever that value changes. CSSGen.dev's transition generator covers duration, delay and the full easing range, including cubic-bezier() curves and the linear() function that makes genuine spring and bounce effects possible without keyframes.
Syntax
transition: <property> <duration> <timing-function> <delay>;| Part | What it controls |
|---|---|
| property | Which property to animate, or all. Naming the property explicitly is faster and avoids animating things you did not intend. |
| duration | How long it runs. Under 150ms reads as instant; over about 500ms starts to feel sluggish for interface feedback. |
| timing-function | The shape of the change over time: ease, linear, ease-in, ease-out, ease-in-out, or a custom cubic-bezier(). |
| delay | Waits before starting. Negative values jump into the middle of the curve. |
| cubic-bezier() | Four numbers defining two control points. Values above 1 or below 0 on the Y axis overshoot, which is how anticipation and overshoot are built. |
| linear() | Takes a list of stops to approximate any curve, including springs and multi-bounce easing that a single bezier cannot express. |
Notes from practice
ease-out for entrances, ease-in for exits
Things arriving should decelerate into place, which is ease-out. Things leaving should accelerate away, which is ease-in. Using ease-in-out for everything is the most common reason interface motion feels mushy.
Transitions need a starting value
A property with no defined initial value will not animate. auto is the usual culprit: height: auto to a pixel height does not transition, which is why the grid-template-rows: 0fr to 1fr trick exists.
Respect reduced motion
Wrap decorative motion in @media (prefers-reduced-motion: reduce) and drop the duration to near zero. It is one media query and it matters to real users.
CSS Transition Generator FAQ
How do I add a smooth hover effect in CSS?
Put the transition on the element's resting state, not on :hover, so it runs in both directions: .btn { transition: background-color 180ms ease-out } and then set the new colour under .btn:hover. Declaring it only on :hover makes the hover-out snap.
What is cubic-bezier in CSS?
It defines a custom easing curve from two control points, written as cubic-bezier(x1, y1, x2, y2). The X values must sit between 0 and 1, but the Y values can go beyond, which produces anticipation before the move and overshoot at the end.
Why is my CSS transition not working?
The three usual causes are a property that has no animatable starting value such as height: auto or display: none, a property that is simply not animatable, and the transition being declared only in the :hover rule so it never runs on the way out.
How do I create a spring or bounce easing in CSS?
Use linear() with a list of stops, which approximates any curve including multi-bounce springs: transition-timing-function: linear(0, 0.5 20%, 1.05 50%, 0.98 70%, 1). A single cubic-bezier can overshoot once but cannot settle through several bounces.
What is the difference between a transition and an animation?
A transition runs once, between two states, and needs something to trigger the change — usually a hover, a focus or a class being added. An animation with @keyframes runs on its own, can define any number of intermediate steps, and can repeat.
Related generators
- Keyframe Animation — Pick a ready-made @keyframes set and tune timing, repeat, direction and fill mode.
- Transform 2D & 3D — Translate, rotate, scale and skew in 2D or 3D, with perspective and the newer individual transform properties.
- Scroll-driven Animation — Link an animation to scroll position with animation-timeline. Scroll the preview to see it run.
- Motion Path — Move an element along an SVG path with offset-path and animate offset-distance.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.