W3cubDocs

/CSS

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, color;
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 definition

Initial value all
Applies to all elements, ::before and ::after pseudo-elements
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

none | <single-transition-property>#

where
<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

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

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 Status Comment
CSS Transitions
The definition of 'transition-property' in that specification.
Working Draft Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
transition-property 26
26
1
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
10
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
12.1
12.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
11.6 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
3.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
IDENT value 1 12 16 10 15 4
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
transition-property ≤37
≤37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
26
26
18
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.
12.1
12.1
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
1.5
1.5
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
IDENT value ≤37 18 16 14 3 1.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property