This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

Related specifications

CSS Transitions
W3C Working Draft

See also

Related articles

Transitions

Attributions