CSS transition-property

The transition-property CSS property specifies the names of the CSS properties to which a transition effect should be applied. When a specified property changes, the transition effect will occur over a specified duration.

Here's the syntax for the transition-property property:


.element {
  transition-property: property1 property2 ...;
  /* other transition properties */
}

Let's look at an example to understand how the transition-property works:

Result:

In the example above, we have a square element that will transition its width when hovered over. The transition effect will take 1 second to complete.

The CSS code for this example is as follows:


.square {
  transition-property: width;
  transition-duration: 1s;
}

.square:hover {
  width: 200px;
}

In this example, the transition-property specifies that the transition effect should only be applied to the width property of the square element. When the square element is hovered over, its width will change from 100px to 200px over a period of 1 second.