mozilla

Revision 12261 of transition

  • Revision slug: CSS/transition
  • Revision title: transition
  • Revision id: 12261
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 84 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() }}: 0
  • 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> ]

Transition properties are automatically repeated if any property's value list is shorter than the others.

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() }}: 0</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>Transition properties are automatically repeated if any property's value list is shorter than the others.</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