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.

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

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

CSS Transition Playground

DevTools Surf

Example: CSS Transition Playground

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

property: all
duration: 0.3s
timing: ease-in-out
from: background:#fff; transform:scale(1)
to: background:#3b82f6; transform:scale(1.1)

Output

.element {
  background:#fff;
  transform:scale(1);
  transition: all 300ms ease-in-out;
}
.element:hover,
.element.is-active {
  background:#3b82f6;
  transform:scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shorthand: transition: all 300ms ease-in-out; */
/* Cost: 0 of 1 animated property runs on the compositor. */

/* HTML: <div class="element" style="padding:24px 40px;border-radius:12px;background:#3b82f6;color:#fff;font:600 15px system-ui">Hover me</div> */

About CSS Transition Playground

CSS Transition Playground preview - Animation / CSS tool

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.

Related Animation / CSS Tools

CSS Keyframe Generator Loading Spinner Generator Skeleton Screen Generator Hover Effect Generator Text Animation Generator Scroll Animation Generator Particle Effect Generator Gradient Animation Generator