mozilla

Revision 12264 of transition

  • Revision slug: CSS/transition
  • Revision title: transition
  • Revision id: 12264
  • Created:
  • Creator: fryn
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ CSSRef() }}{{ gecko_minversion_header("2") }}

Summary

The -moz-transition CSS property is a shorthand property for {{ cssxref("-moz-transition-property") }}, {{ cssxref("-moz-transition-duration") }}, {{ cssxref("-moz-transition-timing-function") }}, and {{ cssxref("-moz-transition-delay") }}.

Note: This implementation of the CSS transition-duration property is based on a draft specification; the syntax is subject to change.
  • {{ Xref_cssinitial() }}: 0s
  • Applies to: all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements
  • {{ Xref_cssinherited() }}:no
  • Media: {{ Xref_cssinteractive() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-moz-transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

See When property value lists are of different lengths for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Examples

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

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ---
Firefox (Gecko) 4.0 (2.0)
Opera 10.5
Safari (WebKit) nightly, don't know version

See also

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

Revision Source

<p>{{ CSSRef() }}{{ gecko_minversion_header("2") }}</p>
<h3>Summary</h3>
<p>The<code> -moz-transition </code>CSS property is a shorthand property for {{ cssxref("-moz-transition-property") }}, {{ cssxref("-moz-transition-duration") }}, {{ cssxref("-moz-transition-timing-function") }}, and {{ cssxref("-moz-transition-delay") }}.</p>
<div class="note"><strong>Note:</strong> This implementation of the CSS <code>transition-duration</code> property is based on a draft specification; the syntax is subject to change.</div>
<ul> <li>{{ Xref_cssinitial() }}: 0s</li> <li>Applies to: all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements</li> <li>{{ Xref_cssinherited() }}:no</li> <li>Media: {{ Xref_cssinteractive() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">-moz-transition:  [ &lt;transition-property&gt; || &lt;transition-duration&gt; || &lt;transition-timing-function&gt; || &lt;transition-delay&gt; ]
</pre>
<p>See <a href="/en/CSS/CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">When property value lists are of different lengths</a> for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.</p>
<h3>Examples</h3>
<p>There are several more 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>4.0 (2.0)</td> </tr> <tr> <td>Opera</td> <td>10.5</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-property") }}</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