Revision 22034 of transition-property

  • Revision slug: CSS/transition-property
  • Revision title: transition-property
  • Revision id: 22034
  • Created:
  • Creator: CutenessOverload
  • Is current revision? No
  • Comment 4 words added, 1 words removed

Revision Content

{{ SeeCompatTable() }}

Summary

The transition-property CSS property is used to specify the names of 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, because someday they might, causing unexpected results.

If you specify a shorthand property (for example, {{ cssxref("background") }}, all of its longhand sub-properties that can be animated will be.

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: {{ Cssxref("all") }}
  • Applies to: all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

transition-property: none | all | [<property-name>][, <property-name>]*

Values

none
No properties will transition.
all
All properties that can have an animated transition will do so.
property-name
A property to which a transition effect should be applied when its value changes.

Examples

There are several examples of CSS transitions included in the main CSS transitions article.

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }} 10 {{ CompatVersionUnknown() }}{{ property_prefix("-o") }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}

See also

  • CSS transitions
  • {{ cssxref("transition") }}
  • {{ cssxref("transition-duration") }}
  • {{ cssxref("transition-timing-function") }}
  • {{ cssxref("transition-delay") }}

{{ languages( { "ja": "ja/CSS/transition-property"} ) }}

Revision Source

<p>{{ SeeCompatTable() }}</p>
<h3 id="Summary">Summary</h3>
<p>The <code>transition-property</code> CSS property is used to specify the names of CSS properties to which a <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">transition effect</a> should be applied.</p>
<div class="note"><strong>Note:</strong> 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, because someday they might, causing unexpected results.</div>
<p>If you specify a shorthand property (for example, {{ cssxref("background") }}, all of its longhand sub-properties that can be animated will be.</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}

]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("all") }}</li> <li><dfn>Applies to:</dfn> all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul></nobr><h3 id="Syntax">Syntax</h3>
<pre>transition-property: none | all | [&lt;property-name&gt;][, &lt;property-name&gt;]*
</pre>
<h3 id="Values">Values</h3>
<dl> <dt>none</dt> <dd>No properties will transition.</dd> <dt>all</dt> <dd>All properties that can have an animated transition will do so.</dd> <dt>property-name</dt> <dd>A property to which a transition effect should be applied when its value changes.</dd>
</dl>
<h3 id="Examples">Examples</h3>
<p>There are several examples of CSS transitions included in the main <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a> article.</p>
<h3 id="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">CSS Transitions Module Level 3</a> (Working Draft)</li>
</ul>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}</td> <td>10</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-o") }}</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Chrome for Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<h3 id="See_also">See also</h3>
<ul> <li><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a></li> <li>{{ cssxref("transition") }}</li> <li>{{ cssxref("transition-duration") }}</li> <li>{{ cssxref("transition-timing-function") }}</li> <li>{{ cssxref("transition-delay") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/transition-property"} ) }}</p>
Revert to this revision