transition-property

Specifies the property or properties of an element that a transition effect should apply to.

Syntax

transition-property: <values>;

The transition-property can have one of the following values:

• all: Default value, applies transition effect to all properties.
• none: No property will have transitioning effect.
• A single property name (e.g. height).
• A comma-separated lost of property names (e.g.margin-right, margin-left, width).

Note: Make sure to declare a transition-duration property, otherwise the duration will be 0 and have no transitioning effect.

Example 1

Setting a p element to have a transition effect on all its properties.

p {
  height: 100px;
  width: 100px;
  background-color: green;
  transition-duration: 2s;
  transition-property: all;
}

p:hover {
  height: 150px;
  width: 200px;
  background-color: blue;
}

Example 2

Setting a div element to have a transition effect on its height, width, and top margin properties.

div {
  height: 100px;
  width: 100px;
  margin-top: 20px;
  margin-right: 50px;
  background-color: green;
  transition-duration: 2s;
  transition-property: height, width, margin-top;
}

div:hover {
  height: 50px;
  width: 50px;
  margin-top: 40px;
}