How do you trigger a CSS transition? Provide two methods.

WHAT THIS TESTS: This question checks whether you know the difference between defining a transition and triggering one. Many developers can write transition: all 0.3s ease but do not understand that the declaration itself is passive. The browser only runs the transition when a tracked property changes value. At the senior level, this is a proxy for understanding CSS state management and how the browser's rendering pipeline handles style changes.

A GOOD ANSWER COVERS four things in order. First, you must set up the transition on the element, specifying at minimum the property and duration, for example transition: transform 300ms or the longhand equivalents. Second, you need a mechanism that actually changes the property value. Method one is a CSS pseudo-class such as :hover, :focus, or :active that overrides the property in a ruleset. Method two is JavaScript class toggling, where you add or remove a class that holds a different value for the transitioned property. Method three is direct inline style manipulation via element.style.opacity = 0.5. A strong candidate will note that the transition fires on both the forward and reverse changes as long as the transition declaration is present on the element before and after the state change.

COMMON WRONG ANSWERS: The biggest red flag is claiming that simply adding the transition property to an element causes an animation to play. Another weak answer is only listing :hover and having no JavaScript approach. Some candidates confuse transitions with CSS animations and start talking about @keyframes, which is off-topic. A subtler mistake is trying to transition from or to auto dimensions without mentioning that the specification recommends against it and that results vary between Gecko and WebKit browsers.

LIKELY FOLLOW-UPS: An interviewer might ask how you would trigger a transition on initial page load, which usually requires a forced reflow or a one-frame delay because the element needs a base state before the change. They might ask which properties are cheapest to transition, where the correct answer is transform and opacity since they do not trigger layout or paint in the compositor. They might also ask about the transitionend event and how you would chain multiple transitions reliably.

ONE CONCRETE EXAMPLE: Imagine a button that slides in from the left. You set button { transform: translateX(-100%); transition: transform 300ms ease; }. In CSS, you could trigger it with button.visible { transform: translateX(0); } when a parent has a class or on :hover. In JavaScript, you would first ensure the element is in the DOM with the initial transform, then add the visible class or set element.style.transform = translateX(0) in the next frame to force the browser to interpolate between the two states.

Source: developer.mozilla.org