transition-property

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Syntax

/* Keyword values */
transition-property: none;
transition-property: all;

/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property: all, -moz-specific, sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

Values

none

No properties will transition.

all

All properties that can transition will.

<custom-ident>

A string identifying the property to which a transition effect should be applied when its value changes.

Formal definition

Formal syntax

none | <single-transition-property>#
where 
<single-transition-property> = all | <custom-ident>

Examples

There are several examples of CSS transitions included in the main CSS transitions article.

Specifications

Browser compatibility

See also

• Using CSS transitions
• transition
• transition-duration
• transition-timing-function
• transition-delay
• TransitionEvent