CSS transition-property Property

Description

The transition-property property specifies the name of the CSS property to which the transition is applied.

Initial value

all

Applies to

All elements, :before and :after pseudo elements

Inherited

No

Media

Visual

Computed value

Same as specified value

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.transitionProperty

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

Desktop
10	12	26	16	12.1	9
Tablets / Mobile
4.4	26	16	12.1	9	1.5

Last updated by CSSPortal on: 2nd November 2019