Using CSS transitions

  • Revision slug: CSS/CSS_transitions
  • Revision title: CSS transitions
  • Revision id: 40516
  • Created:
  • Creator: Meggin Kearney
  • Is current revision? No
  • Comment Updated the browser compatibility table; 55 words added, 64 words removed

Revision Content

{{ SeeCompatTable() }}

CSS transitions, part of the draft CSS3 specification, provide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

Note: Because the CSS transitions specification is still in draft form, all properties associated with them should be prefixed with "-moz-" for use in Gecko. For compatibility with WebKit, you should also use the "-webkit-" prefix, and for Opera compatibility, use the "-o-" prefix. So, for example, you would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.

List of animatable CSS properties

CSS transitions and CSS animations can be used to animate the CSS properties listed here: CSS animatable properties. This list also includes the SVG properties that can be animated.

Note: The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don't currently animate, because someday they might, causing unexpected results.

CSS transition properties

CSS transitions are controlled using the {{ cssxref("transition") }} shorthand property. This is the preferred way to set up your transitions, because it makes it easier to avoid getting your parameter list lengths out of sync, which can result in a frustratingly large amount of time spent debugging of your CSS.

If you wish, you can control the individual components of the transition using the following sub-properties:

{{ cssxref("transition-property") }}
Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
{{ cssxref("transition-duration") }}
Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.
{{ cssxref("transition-timing-function") }}
Specifies a cubic bezier curve used to define how intermediate values for properties are computed.
{{ cssxref("transition-delay") }}
Defines how long to wait between the time a property is changed and the transition actually begins.

Using transition timing functions

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier:

This CSS transition function manipulator is a convenient tool to visually generate CSS transition timing functions.

Instead of specifying a bezier directly, there are pre-defined timing values:

  • ease, equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear, equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in, equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out, equivalent to cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out, equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)

A transition timing effect sampler

This simple example provides demonstrations of several of the transition effects without a lot of extra fluff.

Before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). You can also take a look directly at the CSS it uses.

First, the HTML to create the items we'll be testing our transitions on:

<ul>
  <li id="long1">Long, gradual transition...</li>
  <li id="fast1">Very fast transition...</li>
  <li id="delay1">Long transition with a 2-second delay...</li>
  <li id="easeout">Using ease-out timing...</li>
  <li id="linear">Using linear timing...</li>
  <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

Each item has its own ID; the CSS takes care of the rest. Let's take a look at a couple of examples.

Using a delay

This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Using a linear transition timing function

By default, the timing function used to compute the intermediate steps during the animation sequence provides a gentle acceleration and deceleration curve for the animation effect. If you'd rather have the effect maintain a constant speed for the duration of the animation, you can specify that you'd like to use the linear transition timing function, as shown below.

transition-timing-function: linear;

There are several other standard timing functions available; see {{ cssxref("transition-timing-function") }} for details.

Specifying a cubic bezier timing function

You can take even more control over the timing of the animation sequence by specifying your own cubic bezier curve describing the animation speed. For example:

  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);

This establishes a timing function with a bezier curve defined by the points (0.0, 0.0), (0.2, 0.4), (0.7, 0.8), and (1.0, 1.0).

Detecting the completion of a transition

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd. See the compatibility table at the bottom for more. The transitionend event offers two properties:

propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of {{ cssxref("transition-delay") }}.

As usual, you can use the {{ domxref("element.addEventListener()") }} method to monitor for this event:

el.addEventListener("transitionend", updateTransition, true);
Note: The "transitionend" event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.

When property value lists are of different lengths

If any property's list of values is shorter than the others, its values are repeated to make them match. For example:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

This is treated as if it were:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Similarly, if any property's value list is longer than that for {{ cssxref("transition-property") }}, it's truncated, so if you have the following CSS:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

This gets interpreted as:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Using transitions when highlighting menus

A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It's easy to use transitions to make the effect even more attractive.

Before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). You can also take a look directly at the CSS it uses.

First we set up the menu using HTML:

<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>

Then we build the CSS to implement the look and feel of our menu. The relevant portions are shown here:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  -moz-box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  background-color:white;
  color:black;
  -moz-box-shadow: 2px 2px 1px black;
}

This CSS establishes the look of the menu, with the background and text colors both changing when the element is in its {{ cssxref(":hover") }} state.

Instead of describing the effect at length, you can take a look at the live sample if your browser has transitions support (Firefox and WebKit nightlies, Opera 10.5).

Using transition events to animate an object

In this example, a small box with text inside it moves back and forth across the screen, its background and text colors fading between two values as the animation takes place.

Before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). You can also take a look directly at the CSS it uses.

The HTML

The HTML for this example is very simple:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Transition Demo</title>
    <link rel="stylesheet" href="transitions.css" type="text/css">
    <script src="transitions.js" type="text/javascript"></script>
  </head>
  <body onload="runDemo()">
    <div class="slideRight">This is a box!</div>
  </body>
</html>

The only thing of note here is that we set the class for our box to "slideRight" initially, and when the document is done loading, the runDemo() function in the JavaScript code is executed.

The CSS

In order to create our animation effect, we use two CSS classes, "slideRight" and "slideLeft". If you want to see the complete CSS code, you may look at the transitions.css file in its entirety. Only the relevant bits are shown below:

.slideRight {
  position: absolute;
  -moz-transition-property: background-color, color, left;
  -moz-transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  background-color: red;
  left: 0%;
  color: black;
}

Note that we specify the position property explicitly here. This is necessary because only elements whose position property is expressly defined can have their position animated.

The {{ cssxref("transition-property") }} property is used to list the CSS properties we wish to have animated. In this case, the properties to animate are {{ cssxref("background-color") }}, {{ cssxref("color") }}, and {{ cssxref("left") }}. The {{ cssxref("transition-duration") }} property indicates that we wish the animation to take 5 seconds from start to finish.

The WebKit and Opera equivalents are included in order to let the example work in the corresponding software.

The "slideRight" class is used to specify the start point for the animation of moving the element from the left edge toward the right edge of the browser window. As such, it defines the position and color of the element when it's at the beginning of the animation sequence; in particular, the value for its {{ cssxref("left") }} property is 0%, indicating it will begin at the left edge of the window.

Shown below, the "slideLeft" class defines the end point for the animation; that is, the point at which the left-to-right animation will conclude and we will switch to a right-to-left animation.

.slideLeft {
  position: absolute;
  -moz-transition-property: background-color, color, left;
  -moz-transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  text-align: center;
  background-color: blue;
  left: 90%;
  color: white;
  width: 100px;
  height: 100px;
}

The color values have been changed here, in order to cause the background and text colors to change over the duration of the animation sequence. Additionally, the {{ cssxref("left") }} property is 90% here.

The JavaScript code

Now that we've established the endpoints for the animation sequence, we need to actually initiate the animation. We can do this easily using JavaScript.

Note: Once CSS animations support is available, JavaScript code won't be necessary to achieve this effect.

First, the runDemo() function, which is called when the document loads to initialize the animation sequence:

function runDemo() {
  var el = updateTransition();
  
  // Set up an event handler to reverse the direction
  // when the transition finishes.
  
  el.addEventListener("transitionend", updateTransition, true);
}

This is simple enough; it calls the updateTransition() function we'll define momentarily, whose job is to set the class for the element we're animating based on which direction we want it to travel in. Then it sets up an event listener to watch for the "transitionend" event that's sent when a transition completes; this lets us know when it's time to change the element's class to reverse the direction of the animation.

The updateTransition() function looks like this:

function updateTransition() {
  var el = document.querySelector("div.slideLeft");
  
  if (el) {
    el.className = "slideRight";
  } else {
    el = document.querySelector("div.slideRight");
    el.className = "slideLeft";
  }
  
  return el;
}

This locates the element we're animating by looking it up by its class name (we could use an ID here, of course, but humor me). First we look for the class name "slideLeft". If this is found, we change the element's class to "slideRight". This will initiate the right-to-left translation, since it's time to slide to the left if the element is already at the right edge, which it will be when the "transitionend" event arrives and the element's class is "slideLeft".

If no element is found matching the class "slideLeft", we find the element matching "slideRight" and change its class to "slideLeft", thereby starting the animation in the opposite direction.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 4.0(2.0) (none, as of IE9 pp7) 10.5 3.2
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Property -webkit-transition -moz-transition --- -o-transition -webkit-transition
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Transition ended event webkitTransitionEnd transitionend --- oTransitionEnd webkitTransitionEnd
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • CSS Transitions Module Level 3
  • {{ cssxref("-moz-transition") }}
  • {{ cssxref("-moz-transition-property") }}
  • {{ cssxref("-moz-transition-duration") }}
  • {{ cssxref("-moz-transition-timing-function") }}
  • {{ cssxref("-moz-transition-delay") }}

{{ HTML5ArticleTOC() }}

{{ languages( { "es": "es/CSS/Transiciones_de_CSS", "ja": "ja/CSS/CSS_transitions" } ) }}

Revision Source

<p>{{ SeeCompatTable() }}</p>
<p>CSS transitions, part of the draft CSS3 specification, provide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.</p>
<div class="note"><strong>Note:</strong> Because the CSS transitions specification is still in draft form, all properties associated with them should be prefixed with "-moz-" for use in Gecko. For compatibility with WebKit, you should also use the "-webkit-" prefix, and for Opera compatibility, use the "-o-" prefix. So, for example, you would specify the transition property as <code>-moz-transition</code>, <code>-webkit-transition</code>, and <code>-o-transition</code>.</div>
<h2>List of animatable CSS properties</h2>
<p>CSS transitions and CSS animations can be used to animate the CSS properties listed here: <a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a>. This list also includes the SVG properties that can be animated.</p>
<div class="note"><strong>Note:</strong> The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don't currently animate, because someday they might, causing unexpected results.</div>
<h2>CSS transition properties</h2>
<p>CSS transitions are controlled using the {{ cssxref("transition") }} shorthand property. This is the preferred way to set up your transitions, because it makes it easier to avoid getting your parameter list lengths out of sync, which can result in a frustratingly large amount of time spent debugging of your CSS.</p>
<p>If you wish, you can control the individual components of the transition using the following sub-properties:</p>
<dl> <dt>{{ cssxref("transition-property") }}</dt> <dd>Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.</dd> <dt>{{ cssxref("transition-duration") }}</dt> <dd>Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.</dd> <dt>{{ cssxref("transition-timing-function") }}</dt> <dd>Specifies a cubic bezier curve used to define how intermediate values for properties are computed.</dd> <dt>{{ cssxref("transition-delay") }}</dt> <dd>Defines how long to wait between the time a property is changed and the transition actually begins.</dd>
</dl>
<h2>Using transition timing functions</h2>
<p>Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier:</p>
<p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p>
<p>This <a class="external" href="http://cssglue.com/cubic">CSS transition function manipulator</a> is a convenient tool to visually generate CSS transition timing functions.</p>
<p>Instead of specifying a bezier directly, there are pre-defined timing values:</p>
<ul> <li><strong>ease</strong>, equivalent to <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li> <li><strong>linear</strong>, equivalent to <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li> <li><strong>ease-in</strong>, equivalent to <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li> <li><strong>ease-out</strong>, equivalent to <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li> <li><strong>ease-in-out</strong>, equivalent to <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li>
</ul>
<h3>A transition timing effect sampler</h3>
<p>This simple example provides demonstrations of several of the transition effects without a lot of extra fluff.</p>
<p>Before we look at code snippets, you might want to <a class="external" href="/samples/cssref/transitions/sample3" title="http://developer.mozilla.org/samples/cssref/transitions/sample3/">take a look at the live demo</a> (assuming your browser supports transitions). You can also take a <a class="external" href="/samples/cssref/transitions/sample3/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample3/transitions.css">look directly at the CSS</a> it uses.</p>
<p>First, the HTML to create the items we'll be testing our transitions on:</p>
<pre class="brush: html">&lt;ul&gt;
  &lt;li id="long1"&gt;Long, gradual transition...&lt;/li&gt;
  &lt;li id="fast1"&gt;Very fast transition...&lt;/li&gt;
  &lt;li id="delay1"&gt;Long transition with a 2-second delay...&lt;/li&gt;
  &lt;li id="easeout"&gt;Using ease-out timing...&lt;/li&gt;
  &lt;li id="linear"&gt;Using linear timing...&lt;/li&gt;
  &lt;li id="cubic1"&gt;Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Each item has its own ID; the CSS takes care of the rest. Let's take a look at a couple of examples.</p>
<h4>Using a delay</h4>
<p>This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:</p>
<pre class="brush: css">#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}
</pre>
<h4>Using a linear transition timing function</h4>
<p>By default, the timing function used to compute the intermediate steps during the animation sequence provides a gentle acceleration and deceleration curve for the animation effect. If you'd rather have the effect maintain a constant speed for the duration of the animation, you can specify that you'd like to use the <code>linear</code> transition timing function, as shown below.</p>
<pre class="brush: css">transition-timing-function: linear;
</pre>
<p>There are several other standard timing functions available; see {{ cssxref("transition-timing-function") }} for details.</p>
<h4>Specifying a cubic bezier timing function</h4>
<p>You can take even more control over the timing of the animation sequence by specifying your own cubic bezier curve describing the animation speed. For example:</p>
<pre class="brush: css">  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
</pre>
<p>This establishes a timing function with a bezier curve defined by the points (0.0, 0.0), (0.2, 0.4), (0.7, 0.8), and (1.0, 1.0).</p>
<h2>Detecting the completion of a transition</h2>
<p>There is a single event that is fired when transitions complete. In Firefox, the event is <code>transitionend</code>, in Opera, <code>oTransitionEnd</code>, and in WebKit it is <code>webkitTransitionEnd</code>. See the compatibility table at the bottom for more. The <code>transitionend</code> event offers two properties:</p>
<dl> <dt><code>propertyName</code></dt> <dd>A string indicating the name of the CSS property whose transition completed.</dd> <dt><code>elapsedTime</code></dt> <dd>A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of {{ cssxref("transition-delay") }}.</dd>
</dl>
<p>As usual, you can use the {{ domxref("element.addEventListener()") }} method to monitor for this event:</p>
<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
</pre>
<div class="note"><strong>Note:</strong> The "transitionend" event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.</div>
<h2>When property value lists are of different lengths</h2>
<p>If any property's list of values is shorter than the others, its values are repeated to make them match. For example:</p>
<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
</pre>
<p>This is treated as if it were:</p>
<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}</pre>
<p>Similarly, if any property's value list is longer than that for {{ cssxref("transition-property") }}, it's truncated, so if you have the following CSS:</p>
<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}</pre>
<p>This gets interpreted as:</p>
<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}</pre>
<h2>Using transitions when highlighting menus</h2>
<p>A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It's easy to use transitions to make the effect even more attractive.</p>
<p>Before we look at code snippets, you might want to <a class="external" href="/samples/cssref/transitions/sample2" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">take a look at the live demo</a> (assuming your browser supports transitions). You can also take a <a class="external" href="/samples/cssref/transitions/sample2/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">look directly at the CSS</a> it uses.</p>
<p>First we set up the menu using HTML:</p>
<pre class="brush: html">&lt;div class="sidebar"&gt;
  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</pre>
<p>Then we build the CSS to implement the look and feel of our menu. The relevant portions are shown here:</p>
<pre class="brush: css">.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  -moz-box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  background-color:white;
  color:black;
  -moz-box-shadow: 2px 2px 1px black;
}
</pre>
<p>This CSS establishes the look of the menu, with the background and text colors both changing when the element is in its {{ cssxref(":hover") }} state.</p>
<p>Instead of describing the effect at length, you can take a <a href="/samples/cssref/transitions/sample2" title="https://developer.mozilla.org/samples/cssref/transitions/sample2">look at the live sample</a> if your browser has transitions support (Firefox and WebKit nightlies, Opera 10.5).</p>
<h2>Using transition events to animate an object</h2>
<p>In this example, a small box with text inside it moves back and forth across the screen, its background and text colors fading between two values as the animation takes place.</p>
<p><video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv" tabindex="0">If your browser supported HTML5 video and Theora, you would see this demo in action here.</video></p>
<p>Before we look at code snippets, you might want to <a class="external" href="/samples/cssref/transitions/sample1" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/">take a look at the live demo</a> (assuming your browser supports transitions). You can also take a <a class="external" href="/samples/cssref/transitions/sample1/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css">look directly at the CSS</a> it uses.</p>
<h3>The HTML</h3>
<p>The HTML for this example is very simple:</p>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;CSS Transition Demo&lt;/title&gt;
    &lt;link rel="stylesheet" href="transitions.css" type="text/css"&gt;
    &lt;script src="transitions.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="runDemo()"&gt;
    &lt;div class="slideRight"&gt;This is a box!&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>The only thing of note here is that we set the class for our box to "slideRight" initially, and when the document is done loading, the <code>runDemo()</code> function in the JavaScript code is executed.</p>
<h3>The CSS</h3>
<p>In order to create our animation effect, we use two CSS classes, "slideRight" and "slideLeft". If you want to see the complete CSS code, you may look at the <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> file in its entirety. Only the relevant bits are shown below:</p>
<pre class="brush: css">.slideRight {
  position: absolute;
  -moz-transition-property: background-color, color, left;
  -moz-transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  background-color: red;
  left: 0%;
  color: black;
}
</pre>
<p>Note that we specify the position property explicitly here. This is necessary because only elements whose position property is expressly defined can have their position animated.</p>
<p>The {{ cssxref("transition-property") }} property is used to list the CSS properties we wish to have animated. In this case, the properties to animate are {{ cssxref("background-color") }}, {{ cssxref("color") }}, and {{ cssxref("left") }}. The {{ cssxref("transition-duration") }} property indicates that we wish the animation to take 5 seconds from start to finish.</p>
<p>The WebKit and Opera equivalents are included in order to let the example work in the corresponding software.</p>
<p>The "slideRight" class is used to specify the start point for the animation of moving the element from the left edge toward the right edge of the browser window. As such, it defines the position and color of the element when it's at the beginning of the animation sequence; in particular, the value for its {{ cssxref("left") }} property is 0%, indicating it will begin at the left edge of the window.</p>
<p>Shown below, the "slideLeft" class defines the end point for the animation; that is, the point at which the left-to-right animation will conclude and we will switch to a right-to-left animation.</p>
<pre class="brush: css">.slideLeft {
  position: absolute;
  -moz-transition-property: background-color, color, left;
  -moz-transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  text-align: center;
  background-color: blue;
  left: 90%;
  color: white;
  width: 100px;
  height: 100px;
}
</pre>
<p>The color values have been changed here, in order to cause the background and text colors to change over the duration of the animation sequence. Additionally, the {{ cssxref("left") }} property is 90% here.</p>
<h3>The JavaScript code</h3>
<p>Now that we've established the endpoints for the animation sequence, we need to actually initiate the animation. We can do this easily using JavaScript.</p>
<div class="note"><strong>Note:</strong> Once <a class="external" href="http://dev.w3.org/csswg/css3-animations/" title="http://dev.w3.org/csswg/css3-animations/">CSS animations</a> support is available, JavaScript code won't be necessary to achieve this effect.</div>
<p>First, the <code>runDemo()</code> function, which is called when the document loads to initialize the animation sequence:</p>
<pre class="brush: js">function runDemo() {
  var el = updateTransition();
  
  // Set up an event handler to reverse the direction
  // when the transition finishes.
  
  el.addEventListener("transitionend", updateTransition, true);
}
</pre>
<p>This is simple enough; it calls the <code>updateTransition()</code> function we'll define momentarily, whose job is to set the class for the element we're animating based on which direction we want it to travel in. Then it sets up an event listener to watch for the "transitionend" event that's sent when a transition completes; this lets us know when it's time to change the element's class to reverse the direction of the animation.</p>
<p>The <code>updateTransition()</code> function looks like this:</p>
<pre class="brush: js">function updateTransition() {
  var el = document.querySelector("div.slideLeft");
  
  if (el) {
    el.className = "slideRight";
  } else {
    el = document.querySelector("div.slideRight");
    el.className = "slideLeft";
  }
  
  return el;
}
</pre>
<p>This locates the element we're animating by looking it up by its class name (we could use an ID here, of course, but humor me). First we look for the class name "slideLeft". If this is found, we change the element's class to "slideRight". This will initiate the right-to-left translation, since it's time to slide to the left if the element is already at the right edge, which it will be when the "transitionend" event arrives and the element's class is "slideLeft".</p>
<p>If no element is found matching the class "slideLeft", we find the element matching "slideRight" and change its class to "slideLeft", thereby starting the animation in the opposite direction.</p>
<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 (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>4.0(2.0)</td> <td>(none, as of IE9 pp7)</td> <td>10.5</td> <td>3.2</td> </tr> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Property</td> <td><code>-webkit-transition</code></td> <td><code>-moz-transition</code></td> <td>---</td> <td><code>-o-transition</code></td> <td><code>-webkit-transition</code></td> </tr> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Transition ended event</td> <td><code>webkitTransitionEnd</code></td> <td><code>transitionend</code></td> <td>---</td> <td><code>oTransitionEnd</code></td> <td><code>webkitTransitionEnd</code></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 Phone</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 class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">CSS Transitions Module Level 3</a></li> <li>{{ cssxref("-moz-transition") }}</li> <li>{{ cssxref("-moz-transition-property") }}</li> <li>{{ cssxref("-moz-transition-duration") }}</li> <li>{{ cssxref("-moz-transition-timing-function") }}</li> <li>{{ cssxref("-moz-transition-delay") }}</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "es": "es/CSS/Transiciones_de_CSS", "ja": "ja/CSS/CSS_transitions" } ) }}</p>
Revert to this revision