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

Simple example

This example performs a four-second font size transition when the user hovers over the element, the transition-property is the font-size.

HTML

html

<a class="target">Hover over me</a>

CSS

css

.target {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
}

.target:hover {
  font-size: 36px;
}

You will find more examples of transition-property included in the main CSS transitions article.

Specifications

Specification
CSS Transitions
# transition-property-property

Browser compatibility

BCD tables only load in the browser

See also