transition

  • Revision slug: CSS/transition
  • Revision title: transition
  • Revision id: 317861
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ 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") }}. It allows to define the transition between two states of an element.

  • {{ 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
  • {{ xref_cssanimatable() }} no
  • {{ xref_csscanonicalorder() }} order of the values appearance in the formal grammar

Syntax

Formal grammar: [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> 
                [, [<'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

Specification Status Comment
{{ SpecName('CSS3 Transitions', '#transition', 'transition') }} {{ Spec2('CSS3 Transitions') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}
10.0 11.6 {{ property_prefix("-o") }}
12.10 #
3.0 {{ property_prefix("-webkit") }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{ property_prefix("-webkit") }} {{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoMobile("16.0") }}
{{ CompatUnknown() }} 10.0 {{ property_prefix("-o") }}
12.10 #
3.2 {{ property_prefix("-webkit") }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>transition</code> <a href="/en/CSS" title="CSS">CSS</a> property is a <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">shorthand property</a> for {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, and {{ cssxref("transition-delay") }}. It allows to define the transition between two states of an element.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>transition</code> 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><code>transition-property: all</code></li>
      <li><code>transition-duration: 0s</code></li>
      <li><code>transition-timing-function: ease</code></li>
      <li><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>
  <li><dfn>{{ xref_cssanimatable() }}</dfn> no</li>
  <li><dfn>{{ xref_csscanonicalorder() }}</dfn> order of the values appearance in the formal grammar</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
Formal grammar: [&lt;'transition-property'&gt; || &lt;'transition-duration'&gt; || &lt;'transition-timing-function'&gt; || &lt;'transition-delay'&gt; 
                [, [&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 id="Examples">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&nbsp;transitions</a> article.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Transitions', '#transition', 'transition') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">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") }}<br />
          {{ CompatGeckoDesktop("16.0") }}</td>
        <td>10.0</td>
        <td>11.6 {{ property_prefix("-o") }}<br />
          12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></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>2.1 {{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br />
          {{ CompatGeckoMobile("16.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>10.0 {{ property_prefix("-o") }}<br />
          12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
        <td>3.2 {{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
  <li>{{ domxref("TransitionEvent") }}</li>
  <li>{{ CSS_Reference:transitions() }}</li>
</ul>
Revert to this revision