What is the shorthand syntax for transition?

Q: What is the shorthand syntax for transition?

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. transition: [property] [duration] [timing-function] [delay]; .box { width: 100px; height: 100px; background: coral; transition: transform 0.5s ease-in-out 0.2s; } .box:hover { transform: rotate(45deg); } 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. `transition-property: transform;` `transition-duration: 0.5s;` `transition-timing-function: ease-in-out;` `transition-delay: 0.2s;` You can also define multiple transitions separated by commas when you want to animate several properties at once. transition: width 0.5s ease, background-color 1s linear; `transition` is a shorthand for setting all four transition properties in one declaration. Order matters — the browser determines which value corresponds to each sub-property based on its type. Use commas to define multiple transitions on different properties.

Difficulty: 2/10

CSS transitions, shorthand syntax, animation timing

Using the transition Shorthand Property in CSS

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.

Scenario Questions

0-2 years experience

2-5 years experience

1Your 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.

Follow-up Questions