transition-property

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

/* Keyword values */
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;

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

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

Syntax

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 letters 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.

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
• TransitionEvent