mozilla

Revision 22026 of transition-property

  • Revision slug: CSS/transition-property
  • Revision title: transition-property
  • Revision id: 22026
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words added

Revision Content

{{ CSSRef() }}{{ gecko_minversion_header("1.9.3") }}{{ draft() }}

Summary

The -moz-transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.

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

Note: This implementation of the CSS transition-property property is based on a draft specification; the syntax is subject to change.
  • {{ 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

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

Browser Lowest Version
Internet Explorer ---
Firefox (Gecko) 3.7? (Gecko 1.9.3)
Opera ---
Safari (WebKit) nightly, don't know version

See also

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

Revision Source

<p>{{ CSSRef() }}{{ gecko_minversion_header("1.9.3") }}{{ draft() }}</p>
<h3>Summary</h3>
<p>The<code> -moz-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>
<p>If you specify a shorthand property (for example, {{ cssxref("background") }}, all of its longhand sub-properties that can be animated will be.</p>
<div class="note"><strong>Note:</strong> This implementation of the CSS <code>transition-property</code> property is based on a draft specification; the syntax is subject to change.</div>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("all") }}</li> <li>Applies to: all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements</li> <li>{{ Xref_cssinherited() }}:no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>-moz-transition-property: none | all | [&lt;property-name&gt;][, &lt;property-name&gt;]*
</pre>
<h3>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>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>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>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>3.7? (Gecko 1.9.3)</td> </tr> <tr> <td>Opera</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td><em>nightly, don't know version</em></td> </tr> </tbody>
</table>
<h3>See also</h3>
<ul> <li><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a></li> <li>{{ cssxref("-moz-transition") }}</li> <li>{{ cssxref("-moz-transition-duration") }}</li> <li>{{ cssxref("-moz-transition-timing-function") }}</li> <li>{{ cssxref("-moz-transition-delay") }}</li>
</ul>
Revert to this revision