transition-property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Try it

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #909;
  color: #fff;
  margin-right: 40%;
}

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: 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 value	all
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Computed value	as specified
Animation type	Not 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

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

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`IDENT_value`	1	12	16	15	4	18	16	14	3	1.0	4.4
`transition-property`	261	1212	16494–126	12.11511.6–15	93.1	2618	16494–126	12.11412–14	92	1.51.0	4.44.4
`all`	1	12	4	15	3.1	18	4	14	2	1.0	4.4
`none`	1	12	4	15	3.1	18	4	14	2	1.0	4.4