A transition is enabled with the transition shorthand, which combines four longhand properties: transition-property, transition-duration, transition-timing-function, and transition-delay. The shorthand looks like transition: opacity 200ms ease-in-out, where you list a property, a duration, a timing function, and an optional delay. A common pitfall is forgetting that the first time value is duration and the second is delay — so transition: opacity 1s 200ms means a one-second transition that waits 200 milliseconds before starting.
transition-property names the CSS property (or "all") whose changes should be animated; its default is "all", which can cause unintended animations of properties you did not expect. Naming a specific property, like transition: transform 300ms, is safer and more performant. transition-duration sets how long the transition runs in seconds or milliseconds; the default is 0s, which effectively disables the transition and makes the change instant. transition-delay is the wait time before the transition begins, also defaulting to 0s.
A transition starts when the value of a watched property changes, which typically requires a pseudo-class such as :hover, a class change, or a JavaScript-driven style update. Only properties with a defined interpolation can be smoothly transitioned. Discrete properties like display cannot be animated and switch instantly; a common workaround is to combine visibility with opacity, or to apply a small transition-delay on display:none so the visible fade-out completes first. The visibility property itself is special: although it can be transitioned, it does not fade smoothly — it jumps at the midpoint, becoming hidden from 50% to 100% of the duration under a linear timing function.
Multiple properties can be animated in a single declaration by comma-separating them, each with its own duration and easing. JavaScript can listen for the transitionend event to chain further animations or clean up. Animating height: auto is not directly possible because auto has no fixed numeric value to interpolate from; modern CSS provides interpolate-size: allow-keywords to permit interpolation between keyword sizes like auto.