transition-property

Summary

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

Overview table

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 Object Model Property: transitionProperty
Percentages: N/A

Syntax

transition-property: all
transition-property: none
transition-property: propertyname

Values

none: No transition effect is applied (all transition properties are ignored) when a new property value is specified.
all: All properties that support transitions have the transition effect applied when a new value for the property is specified. (Default)
propertyname: A list of properties, separated by commas, to which the transition effect is applied.

Examples

/*
  * This example only applies "transition-" prefixed css
  *  properties to those listed in "transition-property" css
  *  property(height and width).
  *
  * This example changes a hovered div's height and
  * width to 100px over a duration of 3s, any other css
  *  properties are applied happen instantly.
  *
  */
div:hover{
    background-color: red;
    height: 100px;
    width: 100px;
    transition-property: height, width;
    transition-duration:3s;
}

View live example

Notes

Remarks

The version of this property using a vendor prefix, -ms-transition-property, has been deprecated. To ensure compatibility in the future, applications using this property with a vendor prefix should be updated accordingly.

Standards information

CSS Transitions Module Level 3, Section 2.1

Related specifications

CSS Transitions: W3C Working Draft

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]