CSS transition

Shorthand property that sets different properties to translate an element in a single declaration.

Syntax

transition: <values>;

Copy to clipboard
Copy to clipboard

The transition property can have the following properties as values:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Note: The order in which the values are declared does not matter unless a delay is specified. The browser will always recognize the first time value as duration, so to declare a delay value we must first declare a duration value then a delay value.

Example 1

Transitioning a div elements width from 100px to 300px in a linear motion, with a duration of 2 seconds after hovering over the element for 1 second.

div {
  height: 100px;
  width: 100px;
  transition: width 2s 1s linear;
}

div:hover {
  width: 300px;
}

Copy to clipboard
Copy to clipboard

The above would be the same as:

div {
  height: 100px;
  width: 100px;
  transition-property: width;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}

div:hover {
  width: 300px;
}

Copy to clipboard
Copy to clipboard