The <strong><code>transition-property</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the CSS properties to which a <a href="/en-US/docs/Web/CSS/CSSTransitions/UsingCSS_transitions">transition effect</a> should be applied.

<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span> <span class="token comment">/ &lt;custom-ident&gt; values /</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> test_05<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> -specific<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> sliding-vertically<span class="token punctuation">;</span> <span class="token comment">/ Multiple values /</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> test1<span class="token punctuation">,</span> animation4<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">,</span> height<span class="token punctuation">,</span> color<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">,</span> -moz-specific<span class="token punctuation">,</span> sliding<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">transition-property</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

transition-property

The transition-property CSS 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: revert; transition-property: unset; 

Values

No properties will transition.

All properties that can transition will.

A string identifying the property to which a transition effect should be applied when its value changes.

Formal definition

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.

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

.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

See also