transition-duration

  • Revision slug: CSS/transition-duration
  • Revision title: transition-duration
  • Revision id: 14450
  • Created:
  • Creator: yyss
  • Is current revision? No
  • Comment 20 words added

Revision Content

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("2") }}

Summary

The -moz-transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

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() }}: 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-duration: <time>[, <time>]*

Values

time
The time (in seconds or milliseconds) the transition from the old value of a property to the new value should take. A time in seconds is represented by a number followed by "s", while a time in milliseconds is a number followed by "ms".

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) 4.0? (2.0)
Opera ---
Safari (WebKit) nightly, don't know version

See also

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

{{ languages( { "ja": "ja/CSS/transition-duration"} ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("2") }}</p>
<h3>Summary</h3>
<p>The<code> -moz-transition-duration </code>CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.</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() }}: 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>-moz-transition-duration: &lt;time&gt;[, &lt;time&gt;]*
</pre>
<h3>Values</h3>
<dl> <dt>time</dt> <dd>The time (in seconds or milliseconds) the transition from the old value of a property to the new value should take. A time in seconds is represented by a number followed by "s", while a time in milliseconds is a number followed by "ms".</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>4.0? (2.0)</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-property") }}</li> <li>{{ cssxref("-moz-transition-timing-function") }}</li> <li>{{ cssxref("-moz-transition-delay") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/transition-duration"} ) }}</p>
Revert to this revision