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

<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