How Can I Use CSS Transition Shorthand for Multiple Properties Efficiently?

CSS Transition Shorthand for Multiple Properties

In CSS, the transition shorthand allows you to combine multiple transition properties into a single declaration. However, when using it with multiple properties, it's important to follow the correct syntax.

Syntax

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

Note that the duration must precede the delay, if specified.

Combining Individual Transitions

To combine individual transitions, use the following syntax:

-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

Alternatively, you can transition all properties simultaneously:

-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 .5s;
}

In this example, both height and opacity will transition over 0.5 seconds, but the opacity transition will delay for another 0.5 seconds.

Compatibility

Transition shorthand is widely supported in modern browsers. Refer to http://caniuse.com/css-transitions for detailed compatibility information.

Conclusion

The CSS transition shorthand simplifies the declaration of multiple transitions, allowing you to control the animation of CSS properties more efficiently. Remember to follow the correct syntax and use prefixes for cross-browser compatibility.

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