CSS transition-property Property

Description

The transition-property CSS property is used to specify which CSS properties should undergo a smooth transition when their values change. When applied to an element, it allows you to define a list of property names, separated by commas, to indicate which properties should animate smoothly when altered. This property is commonly used in conjunction with other transition-related properties, such as transition-duration and transition-timing-function, to control the timing and easing of these transitions. It's a valuable tool for creating fluid and visually appealing animations and transitions in web design, enhancing user experience and interactivity.

Initial value: all
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: Same as specified value
Animatable: No
JavaScript syntax: object.style.transitionProperty

Interactive Demo

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

Hover over me
to see transition.

Syntax

transition-property: none | <single-transition-property> [ ',' <single-transition-property> ]*

Values

<single-transition-property> = all | <IDENT>

noneNo properties will transition.
allAll properties that can have an animated transition will do so.
IDENTA string identifying the property to which a transition effect should be applied when its value changes. This identifier is composed by case-insensitive letter a to z, numbers 0 to 9, an underscore (_) or a dash(-). The first non-dash character must be a letter (that is no number at the beginning of it, even preceded by a dash). Also two dashes are forbidden at the beginning of the identifier.

Example

HTML

<div class="test">

   duration: 5s;  <br>

   delay: 3s, 1s;  <br>

   property: width, height;

</div>

CSS

div {
   width: 150px; 
   height: 120px; 
   background-color: yellow;
   border: 5px dashed black; 
}
div:hover {
   width: 100%; 
   height: 200px;
   background-color: rgba (255,0,0, .7);
}
.test {
   transition-duration: 5s; 
   transition-delay: 3s, 1s;
   transition-property: width, height; 
}

Result

Editor