How to Correctly Use CSS Transition Shorthand for Multiple Properties?

CSS Transition with Multiple Properties: Shorthand Syntax Clarification

The CSS transition shorthand syntax enables us to transition multiple properties simultaneously. However, the syntax provided in the given example is incorrect.

Shorthand Syntax Structure:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Note: The duration must precede the delay if the delay is specified.

Correct Shorthand Syntax for the Given Example:

transition: height 0.5s, opacity 0.5s 0.5s;

This syntax indicates that:

• The height property transitions over 0.5 seconds.
• The opacity property transitions over 0.5 seconds, with a delay of 0.5 seconds.

Simplified Syntax:

If transitioning all properties concurrently, you can use the following simplified shorthand syntax:

transition: all 0.5s;

Code Example with Correct Syntax:

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

This updated code should now transition the element's height and opacity smoothly.

The above is the detailed content of How to Correctly Use CSS Transition Shorthand for Multiple Properties?. For more information, please follow other related articles on the PHP Chinese website!