transition-property

Summary

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

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

Syntax

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

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># [ ‘,’ <single-transition-property># ]*
where 
<single-transition-property> = all | 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