transition-property

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

Try it

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

Syntax

css
/* 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: revert;
transition-property: revert-layer;
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

Initial valueall
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas specified
Animation typeNot animatable

Formal syntax

transition-property = 
none |
<single-transition-property>#

<single-transition-property> =
all |
<custom-ident>

Examples

Basic example

When the button is hovered or focused, it undergoes a one-second color transition; the transition-property is background-color.

HTML

html
<button class="target">Focus me!</button>

CSS

css
.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #ccc;
}

.target:hover,
.target:focus {
  background-color: #eee;
}

See our Using CSS transitions guide for more transition-property examples.

Specifications

Specification
CSS Transitions
# transition-property-property

Browser compatibility

BCD tables only load in the browser

See also