CSS · Layout and visual systems
How do CSS transitions work?
Short answer
A transition interpolates an animatable property between two values when the value changes. You set transition-property, duration, timing-function and delay, ideally limited to transform and opacity.
Transitions are triggered by a change, such as hover, a class toggle or a state change. The browser needs a start value and an end value. Properties that cannot be interpolated, such as display, change discretely.
.button {
transition:
background-color 150ms ease,
transform 150ms ease;
}
.button:hover {
background-color: #1d4ed8;
transform: translateY(-1px);
}The parts
- transition-property names the properties to animate
- transition-duration sets how long the interpolation takes
- transition-timing-function shapes the acceleration curve
- transition-delay waits before starting
- The shorthand order is property, duration, timing function and delay
Transform and opacity are usually the cheapest properties to animate because they can run on the compositor. Animating width, height, top or left can trigger layout and paint on every frame, which is more likely to stutter.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Which properties are cheap to animate?
- 2What triggers a transition?
- 3Why is transitioning all a bad idea?
- 4How do you respect reduced motion?
Say it in the interview
A transition interpolates a property when its value changes, using a duration, timing function and optional delay. I target specific properties, usually transform and opacity, because they can be handled by the compositor. Animating layout properties can cause jank. I also avoid transitioning all and I provide a reduced-motion path.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.