Revision 14451 of transition-duration

  • Revision slug: CSS/transition-duration
  • Revision title: transition-duration
  • Revision id: 14451
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 23 words added, 95 words removed

Revision Content

{{ SeeCompatTable() }}

Summary

The 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("transition-property") }} property.

  • {{ 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

transition-duration: time[, time]*

where :

time
Is a {{ xref_csstime() }} denoting the amount of time the transition from the old value of a property to the new value should take.

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("transition") }}
  • {{ cssxref("transition-property") }}
  • {{ cssxref("transition-timing-function") }}
  • {{ cssxref("transition-delay") }}

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

Revision Source

<p>{{ SeeCompatTable() }}</p>
<h3>Summary</h3>
<p>The<code> transition-duration </code><a href="/en/CSS" title="CSS">CSS</a> 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("transition-property") }} property.</p>
<ul> <li>{{ Xref_cssinitial() }}: <code>0s</code></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>transition-duration: <em>time</em>[, <em>time</em>]*
</pre>
<p>where :</p>
<dl> <dt><em>time</em></dt> <dd>Is a {{ xref_csstime() }} denoting the amount of time the transition from the old value of a property to the new value should take.</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("transition") }}</li> <li>{{ cssxref("transition-property") }}</li> <li>{{ cssxref("transition-timing-function") }}</li> <li>{{ cssxref("transition-delay") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/transition-duration"} ) }}</p>
Revert to this revision