Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 22036 of transition-delay

  • Revision slug: CSS/transition-delay
  • Revision title: transition-delay
  • Revision id: 22036
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment page created, 231 words added

Revision Content

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

Summary

The -moz-transition-delay CSS property specifies the number of seconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

A value of 0 indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

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

Note: This implementation of the CSS transition-delay 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-delay: <time>[, <time>]*

Values

time
The number of seconds to wait between a property's value changing and the start of the animation effect.

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-delay </code>CSS property specifies the number of seconds to wait between a change being requested to a property that is to be transitioned and the start of the <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">transition effect</a>.</p>
<p>A value of 0 indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.</p>
<p>You may specify multiple delays; each delay 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;">delay</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>-moz-transition-delay: &lt;time&gt;[, &lt;time&gt;]*
</pre>
<h3>Values</h3>
<dl> <dt>time</dt> <dd>The number of seconds to wait between a property's value changing and the start of the animation effect.</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