transition-property property CSS Reference



Definition and Usage

The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.

Note: The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don't currently animate, because someday they might, causing unexpected results.

If you specify a shorthand property (for example, background, all of its longhand sub-properties that can be animated will be.

  • Initial all
  • Applies to all elements, ::before and ::after pseudo-element
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*
transition-property: none
transition-property: all
transition-property: test_05
transition-property: -specific
transition-property: sliding-vertically
transition-property: test1
transition-property: test1, animation4
transition-property: all, height, all
transition-property: all, -moz-specific, sliding
transition-property: inherit

Values

none
No properties will transition.
all
All properties that can have an animated transition will do so.
IDENT
A 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.

Examples

No examples


Compatibility

Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (Yes) -webkit4.0 (2.0) -moz
16.0 (16.0)
1011.6-o
12.10
(Yes) -webkit

Mobile browsers

FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (Yes) -webkit (Yes) -webkit4.0 (2.0) -moz
16.0 (16.0)
NANA (Yes) -webkit

Relative articles