mozilla

Revision 22022 of transition-property

  • Revision slug: CSS/transition-property
  • Revision title: transition-property
  • Revision id: 22022
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment new page; page created, 161 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.

Note: This implementation of the CSS <code>transition-property</code> 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

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>
<div class="note"><strong>Note:</strong> This implementation of the CSS &lt;code&gt;transition-property&lt;/code&gt; 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>
Revert to this revision