mozilla

Revision 12257 of transition

  • Revision slug: CSS/transition
  • Revision title: transition
  • Revision id: 12257
  • Created:
  • Creator: FGRibreau
  • Is current revision? No
  • Comment Browser compatibility updated; 1 words added, 1 words removed

Revision Content

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

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") }}.

You may specify multiple durations; each duration will be applied to the corresponding property as specified by the {{ cssxref("-moz-transition-property") }} property.

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

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 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("1.9.3") }}{{ draft() }}</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>
<p>You may specify multiple durations; each duration will be applied to the corresponding property as specified by the {{ cssxref("-moz-transition-property") }} property.</p>
<div class="note"><strong>Note:</strong> This implementation of the CSS <code>transition-<span style="font-family: Verdana,Tahoma,sans-serif;">duration</span></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>
<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>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