Home > Web Front-end > CSS Tutorial > How to Correctly Use the CSS Transition Shorthand for Multiple Properties?

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

Mary-Kate Olsen
Release: 2024-11-28 20:19:11
Original
581 people have browsed it

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;
}
Copy after login

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> [, ...];
Copy after login

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;
}
Copy after login

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

.element {
  transition: all 0.5s;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template