CSS transition-property Property

Description

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

  • Initial valueall
  • Applies toAll elements, :before and :after pseudo elements
  • InheritedNo
  • MediaVisual
  • Computed valueSame as specified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.transitionProperty

Syntax

Formal syntax: none | <single-transition-property> [ ',' <single-transition-property> ]* 

transition-property: none;
transition-property: all;
transition-property: all, height, all;

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

.class {
   transition-property: all;
}

Browser Support

?Firefox?Explorer?Chrome?Safari?Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.