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;

Syntax

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

Values

• 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

<div class="test">

   duration: 5s;  <br>

   delay: 3s, 1s;  <br>

   property: width, height;

</div> 

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; 
}

Browser Support

The following table will show you the current browser support for the CSS transition-property property.

Desktop
12	26	16	12.1	9

Tablets / Mobile
26	16	12.1	9	1.5	4.4

Last updated by CSSPortal on: 2nd January 2024