About CSS Transition Playground

Build and preview CSS transitions with property, duration, and easing controls. Part of the DevTools Surf developer suite. Browse more tools in the Animation / CSS collection.

Use Cases

• Frontend developers fine-tuning transition timing for UI polish
• Designers experimenting with duration and easing combinations
• Component library authors documenting transition specifications
• UX engineers optimizing perceived performance of state changes

Tips

• Combine multiple properties in a single transition declaration
• Use different durations per property for staggered effects
• Test ease, ease-in-out, and linear to find the right feel

Fun Facts

• CSS transitions were first proposed by Dave Hyatt at Apple in 2007 and implemented in WebKit — they became a W3C Working Draft in 2009 as part of CSS3.
• The default CSS transition timing function is 'ease' (cubic-bezier(0.25, 0.1, 0.25, 1.0)), not 'linear' — many developers don't realize their transitions are already eased.
• CSS transitions only animate between two states (A to B), while CSS animations can define multiple keyframe steps — this fundamental difference determines which tool to use.

FAQ

Is transition the same as animation?

Different. Transitions fire when a property changes (hover, state toggle). Animations run from @keyframes on their own schedule. Transitions are simpler.

Which properties can I transition?

Most CSS numeric properties: width, height, opacity, transform, color, background. A few non-animatable ones (display, visibility) don't transition smoothly.

What's `all`?

`transition-property: all` transitions every change. Convenient but slow and unpredictable. Prefer explicit properties — listing exactly what you want to transition.

Common easings?

ease-in-out (natural), ease-out (fast start, slow end — feels responsive), cubic-bezier (custom curves). Linear is mechanical and rare.