CSS transition-property

Description

CSS transition-property property represents a list of properties that we want to change. And the properties are separated by a comma.

Syntax

transition-property : property-name

Property values

property1, property2Default: We can specify a list of values that we want to change as a result of some event (:hover).; transition-property: width, background-color;
Try it
all: This keyword covers up all of the properties that we want to change.; transition-property: all;
Try it

Applicable to

It applies to all elements

Preview

Code

CSS

.element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateZ(0deg);
 transition-property: transform;
 transition-duration:4s;
}
.element:hover{
 background-color:lightgreen;
 width:200px;
}

HTML

<div class="element">
	This property represents a list of properties that we want to change.
 </div>