The transition shorthand property in CSS allows you to define all transition-related properties (such as property name, duration, timing function, and delay) in a single line. It simplifies the syntax and makes the code cleaner.

Syntax Example

CSS Example

In this example, the element rotates 45 degrees over 0.5 seconds using an ease-in-out timing function and starts after a 0.2-second delay.

Expanded Version of the Shorthand

1
transition-property: transform;
2
transition-duration: 0.5s;
3
transition-timing-function: ease-in-out;
4
transition-delay: 0.2s;

You can also define multiple transitions separated by commas when you want to animate several properties at once.

Example: Multiple Transitions

Key Takeaways

1
transition is a shorthand for setting all four transition properties in one declaration.
2
Order matters — the browser determines which value corresponds to each sub-property based on its type.
3
Use commas to define multiple transitions on different properties.

Difficulty: 2/10

Topics: CSS transitions, shorthand syntax, animation timing

Scenario Questions

0-2 years experience

1
You need to make a button fade its background color over 200 ms when hovered. How would you write the CSS using the transition shorthand?
2
If you write transition: 0.5s; what will happen? Which properties will be affected and what defaults are applied?

2-5 years experience

1
Your team added a transition to a modal component, but the animation sometimes lags on slower devices. Walk me through how you would debug the transition timing and what adjustments you might make to the shorthand.
2
We have a component that needs to transition both opacity and transform with different durations. Show how you'd express that using the transition shorthand, and explain any pitfalls.

5-8 years experience

1
In a large design system, you need to enforce consistent transition timings across hundreds of components while still allowing overrides. How would you structure the CSS (or preprocessor variables) using the transition shorthand to balance consistency and flexibility?
2
A recent performance audit flagged that some transitions are causing layout thrashing because they animate properties that trigger reflow. Explain how you would audit and refactor the transition shorthand usage to improve performance.

8+ years experience

1
Our legacy codebase mixes longhand transition properties with the shorthand, leading to specificity conflicts during a migration to a CSS‑in‑JS solution. Describe a migration strategy that ensures visual parity and minimizes regression risk.
2
Cross‑team, we want to standardize transition naming and timing tokens across web, mobile, and desktop platforms. How would you design a system (including CSS variables, token definitions, and tooling) that leverages the transition shorthand while keeping the implementation maintainable?

Follow-up Questions

❓What are the default values for each sub‑property when they’re omitted?
❓Can you later override just the timing function without redefining the whole shorthand?
❓How does the order of values affect how the browser parses the shorthand?