What are CSS Transitions

You can also set a delay for the transition using the transition-delay property, so the transition is not immediately triggered when the cursor is hovered over.

div {
  /* . . . */
 
  transition-property: width, color, background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
}

Notice that the transition only starts 1s after the cursor is hovered over.

The shorthand

Lastly, there is a shorthand property you can use to define all transition properties together. It has the following syntax:

transition: <property> <duration> <timing_function> <delay>;

div {
  /* . . . */
  transition: width 2s ease-in-out 1s;
}

To define multiple transitions, divide different cases with commas:

div {
  /* . . . */
  transition:
    width 2s ease-in-out 1s,
    color 2s ease-in-out 1s,
    background-color 2s ease-in-out 1s;
}