W3cubDocs

transition-property

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

Note: The set of properties that can be animated is subject to change. As such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results.

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, 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 transition will.
<custom-ident>: A string identifying the property to which a transition effect should be applied when its value changes.

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

Specification	Status	Comment
CSS Transitions The definition of 'transition-property' in that specification.	Working Draft	Initial definition

Initial value	all
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	26 26 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	12 12 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	16 16 4 Prefixed Prefixed Implemented with the vendor prefix: -moz- 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	10	12.1 12.1 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 11.6 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Yes Yes Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-
`IDENT` value	Yes	?	Yes	Yes	Yes	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes Yes Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	26 26 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	12 12 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	16 16 4 Prefixed Prefixed Implemented with the vendor prefix: -moz- 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	?	Yes Yes Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Yes Yes Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-
`IDENT` value	Yes	Yes	?	Yes	Yes	No	Yes