transition

  • Revision slug: CSS/transition
  • Revision title: transition
  • Revision id: 12277
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 4 words removed

Revision Content

{{ SeeCompatTable() }}

Summary

The transition CSS property is a shorthand property for {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, and {{ cssxref("transition-delay") }}.

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: transition is a shorthand property, so it does not technically have an initial value
    but the properties for which it is shorthand have the following initial values:
    • transition-property: all
    • transition-duration: 0s
    • transition-timing-function: ease
    • transition-delay: 0s
  • Applies to: all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssinteractive() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

See When property value lists are of different lengths for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Examples

There are several more examples of CSS transitions included in the main CSS transitions article.

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }} 10.0 {{ property_prefix("-ms") }}  10.5 3.0 {{ property_prefix("-webkit") }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

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

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

Revision Source

<p>{{ SeeCompatTable() }}</p>
<h2>Summary</h2>
<p>The<code> transition </code><a href="/en/CSS" title="CSS">CSS</a> property is a shorthand property for {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, and {{ cssxref("transition-delay") }}.</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}



]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> transition is a shorthand property, so it does not technically have an initial value<br> but the properties for which it is shorthand have the following initial values: <ul> <li style="display:list-item;list-style-type:disc"><code>transition-property: all</code></li> <li style="display:list-item;list-style-type:disc"><code>transition-duration: 0s</code></li> <li style="display:list-item;list-style-type:disc"><code>transition-timing-function: ease</code></li> <li style="display:list-item;list-style-type:disc"><code>transition-delay: 0s</code></li> </ul> </li> <li><dfn>Applies to:</dfn> all elements, {{ cssxref(":before") }} and {{ cssxref(":after") }} pseudo elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li> <li><dfn>Media:</dfn> {{ Xref_cssinteractive() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
</nobr>
<p><nobr></nobr></p><nobr>
<h2>Syntax</h2>
<pre class="eval">transition:  [ &lt;transition-property&gt; || &lt;transition-duration&gt; || &lt;transition-timing-function&gt; || &lt;transition-delay&gt; ]
</pre>
<p>See <a href="/en/CSS/CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">When property value lists are of different lengths</a> for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.</p>
<h2>Examples</h2>
<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>
<h2>Specifications</h2>
<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>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>1.0 {{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}</td> <td>10.0 {{ property_prefix("-ms") }} </td> <td>10.5</td> <td>3.0 {{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a></li> <li>{{ cssxref("transition-property") }}</li> <li>{{ cssxref("transition-duration") }}</li> <li>{{ cssxref("transition-timing-function") }}</li> <li>{{ cssxref("transition-delay") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/transition"} ) }}</p></nobr>
Revert to this revision