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]