How to Correctly Use the CSS Transition Shorthand for Multiple Properties?

How to Use the CSS Transition Shorthand with Multiple Properties

The CSS transition shorthand allows you to specify multiple transition properties in a single declaration. This can be useful for reducing the amount of code you need to write. However, finding the correct syntax can be challenging.

Incorrect Shorthand Syntax

The provided code snippet incorrectly uses the CSS transition shorthand:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

The problem lies in the third parameter of the opacity transition. You cannot specify a delay after the duration.

Correct Shorthand Syntax

The correct syntax for the CSS transition shorthand with multiple properties is as follows:

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

Note that the duration must come before the delay, if the latter is specified.

Example

To transition both the height and opacity of an element using the shorthand, you would write:

.element {
  transition: height 0.5s, opacity 0.5s;
}

Alternatively, you can transition all CSS properties of an element at once:

.element {
  transition: all 0.5s;
}

By using the CSS transition shorthand, you can simplify your CSS code and reduce the amount of time it takes to define transitions.

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