Transition-property - Property CSS

Syntax diagram of transition-property.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• prop is the name of a property.

Description of the transition-property property.

transition-property defines which property(ies) must be subject to a transition. The transition starts when the value of a property is set or changed. Not all CSS properties can be associated with a transition. As a general rule, it is possible to apply a transition on:

• Properties that accept a numeric value, regardless of the unit.
• Properties that accept a color.
• The so-called "discrete" properties. See the page on transition-behavior for more information.

For a general presentation of transitions, refer to the shorthand property transition.

Values for transition-property.

• transition-property: all;

  All properties will have a transition effect when their value is set or changed. However, the effect is not visible until the property transition-duration has been set to a value other than zero.

• transition-property: none;

  No property is subject to a transition effect.

• transition-property: width;

  The width property is subject to a transition effect.

• transition-property: width, height;

  Multiple property names separated by commas. In this example, both the width and height properties will be subjected to a transition effect. Refer to the page on multiple transitions for more details.

  If one of the listed properties is not recognized by the browser, it is ignored, but the browser must maintain the matching with the other parameters. In the example below, the xxxx property is not recognized, but this should not shift the durations; in other words, the transition on width must still occur over 2 seconds.

  transition-property:xxxx, width; transition-duration:1s, 2s;
• transition-property: initial; (all) transition-property: inherit; transition-property: revert; transition-property: revertLayer; transition-property: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the transition-property property.

No animation possible for the property transition-property.

Browsers compatibility with transition-property.

Transition effects have been well supported by all browsers for quite a few years. There are no special precautions to take regarding the compatibility of the transition-property property.

However, it is important to keep in mind that not all properties can be subject to a transition. In particular, a transition cannot be applied to properties that only accept non-numeric values (text-align for example), but see transition-behavior on this subject.

1

Transitions
support

2

transition-property
property

Estimated overall support.

97%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the transition-property property.

• CSS Transitions - Level 1

  Normally, when a property changes of value, its display on the screen is immediate. This specification module describes how to progressively change properties from one value to another over a given time. In other words, how to gradually move from one state to another.
  However, an external event is needed to trigger the change in property values (JavaScript code, user action, etc.). In this sense, transitions differ from animations, which can run independently of any external action.

  Regarding transition-property. First specification regarding transitions, and definition of the transition-property property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Transitions - Level 2

  Level 2 of the specification on transitions adds the ability to apply a transition to a discrete property.
  A new at-rule @starting-style allows defining the starting values for property values. It is now possible to apply a transition to elements that go from the invisible state to the visible state.

  Regarding transition-property. No change to the transition-property property.
  

  September 05, 2023

  Working Draft.

  

  

  

See also: transitions.

CSS standards are published by the W3C and organized into modules. Transitions are described in the module CSS Transitions. Here are the properties related to transitions:

Properties:

At-rules: