mozilla

Revision 393929 of transition

  • Revision slug: Web/CSS/transition
  • Revision title: transition
  • Revision id: 393929
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment CSS/transition Web/CSS/transition

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The CSS transition 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. Different states may be defined using pseudo-classes like {{cssxref(":hover")}} or {{cssxref(":active")}} or dynamically set using JavaScript.

{{cssbox("transition")}}

Syntax

Formal syntax: {{csssyntax("transition")}}

Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to 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") }}
26.0
{{ 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 <a href="/en/CSS" title="CSS">CSS</a> <code>transition</code> 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. Different states may be defined using <a href="/en-US/docs/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-classes</a> like {{cssxref(":hover")}} or {{cssxref(":active")}} or dynamically set using JavaScript.</p>
<p>{{cssbox("transition")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transition")}}
</pre>
<p>Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the <a href="/en-US/docs/CSS/transition-duration" title="/en-US/docs/CSS/transition-duration">transition-duration</a>, and the second value that can be parsed as a time is assigned to <a href="/en-US/docs/CSS/transition-delay" title="/en-US/docs/CSS/transition-delay">transition-delay</a>.</p>
<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") }}<br />
          26.0</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