How do CSS transitions work?

Detailed explanation

CSS transitions smoothly animate a property from its current value to a new value when an element’s styles change. Instead of switching immediately, the browser displays intermediate values over a specified duration. A transition can be triggered by a pseudo-class such as :hover or :focus, a JavaScript class toggle, or another change to the element’s computed styles. Transitions are useful for button feedback, expanding interface elements, and making state changes easier to follow without writing animation logic in JavaScript.

Four properties control a transition: transition-property selects what changes, transition-duration sets how long the animation lasts, transition-timing-function controls its progression, and transition-delay optionally postpones its start. The shorthand combines them; for example, transition: background-color 0.3s ease-in-out; animates a background colour change over 300 milliseconds. If two time values appear, the first is the duration and the second is the delay. The default duration is 0s, so declaring only a property produces no visible animation. Multiple transitions can be listed with commas.

In the button example, hovering changes the background from blue to darkblue. The browser detects the changed background colour and interpolates between the colours according to ease-in-out, which starts slowly, accelerates, and slows near the end. Although transition: background works as a shorthand-property target, background-color communicates the intention more precisely. Keep the transition declaration on the base .button rule so it also applies when the pointer leaves. If the state changes again before completion, the transition can continue towards the new target from its current animated value rather than visibly jumping to an endpoint.

Not every property supports smooth interpolation: opacity, colours, and transforms do, while display does not produce intermediate visual values. For movement and fading, transform and opacity are often more efficient than properties that trigger layout, such as width or margin. Interviewers typically check whether you understand the trigger, the four controls, and the difference from keyframe animations: transitions respond to style changes, whereas keyframes define an explicit animation sequence. Also mention prefers-reduced-motion when discussing accessibility, since unnecessary motion should be reduced for users who request it.

Key points to remember

• Transitions animate changes in property values; they do not cause the state change themselves.
• Configure the property, duration, timing function, and optional delay.
• Place transition declarations on the base selector to animate both entering and leaving a state.
• Use comma-separated entries to give different properties different transition settings.
• Prefer explicit property names, consider rendering costs, and respect reduced-motion preferences.

Common mistakes candidates make

• Omitting a nonzero duration and expecting a visible animation.
• Declaring the transition only in :hover, which can make the return to the base state abrupt.
• Assuming every property or value pair interpolates smoothly, including display changes or height: auto without additional support.

Likely follow-up questions