How Can I Use CSS Shorthand to Transition Multiple Properties Simultaneously?

Transitioning Multiple CSS Properties with the Shorthand

In CSS, the transition property offers a convenient shorthand to transition multiple properties simultaneously. This can simplify your code and make it more concise. To use the shorthand, follow this syntax:

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

Note that the duration must precede the delay if specified.

Applying Shorthand Transitions to Specific Properties:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Transitioning All Properties:

You can transition all properties with the following shorthand:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Example:

Consider the following example:

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

In this example, adding the show class will cause the element to transition its height and opacity gradually.

Note: The compatibility of transition is excellent (above 94% globally), so using it is generally safe. If you're concerned about compatibility, refer to https://caniuse.com/css-transitions.

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