Revision 299535 of Using CSS transitions

  • Revision slug: CSS/Using_CSS_transitions
  • Revision title: Using CSS transitions
  • Revision id: 299535
  • Created:
  • Creator: davezatch
  • Is current revision? No
  • Comment

Revision Content

{{ SeeCompatTable() }}

The CSS transitions, which are part of the CSS3 specification, provide a way to control the animation speed in changing the CSS properties. Instead of having the animation changes take effect immediately, you can pass the changes in a property over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS enabled transitions, the change comes at a time interval can be specified, following an acceleration curve that can be customized.

Note: The properties of CSS transitions can be used without any prefix provider. But as the specification has achieved stability of late, the vendor prefixes can still be necessary for some browsers (like Opera or WebKit based), or for compatibility with older versions of browsers (like Firefox with a prior of 16 .) See the compatibility chart at the bottom of the page can serve as a reference for the use of each property.

Animatable CSS property list

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

Note: The set of properties that can be animated is subject to change and, as such, should avoid the inclusion of properties currently on the list can not be animated, because someday they could, causing unexpected results.
Note: In Firefox, any property that has the auto value is not encouraged when its value changes in Firefox. See {{ bug("571344") }}for details.

CSS transition properties

CSS Transitions are controlled using quick transition property. This is the best way to configure transitions, as it makes it easier to avoid that the lengths of the parameter list are out of sync, which can be very frustrating to have to spend lots of time debugging the CSS.

You can control the individual components of the transition with 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;
  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;
  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;
  background-color:white;
  color:black;
  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.

Using transitions to make JavaScript functionality smooth

Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.

<p>Click anywhere to move the ball</p>
<div id="foo></div>

Using JavaScript you can make the effect of moving the ball to a certain position happen:

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);

With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:

p {
  padding-left: 60px;

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition:  all 1s;
}

You can play with this here: http://jsfiddle.net/RwtHn/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;
  transition-property: background-color, color, left;
  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;
  transition-property: background-color, color, left;
  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 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}
10 10.5 {{ property_prefix("-o") }} 3.2 {{ property_prefix("-webkit") }}
transitionend event 1.0 as webkitTransitionEnd {{ CompatGeckoDesktop("2.0") }} 10 10.5 as oTransitionEnd 3.2 as webkitTransitionEnd
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoMobile("16.0") }}
{{ CompatUnknown() }} 10 3.2
transitionend event 2.1 as webkitTransitionEnd {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} 10 as oTransitionEnd 3.2 as webkitTransitionEnd

See also

{{ HTML5ArticleTOC() }}

Revision Source

<p>{{ SeeCompatTable() }}</p>
<p>The CSS transitions, which are part of the CSS3 specification, provide a way to control the animation speed in changing the CSS properties. Instead of having the animation changes take effect immediately, you can pass the changes in a property over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS enabled transitions, the change comes at a time interval can be specified, following an acceleration curve that can be customized.</p>
<div class="note">
  Note: The properties of CSS transitions can be used without any prefix provider. But as the specification has achieved stability of late, the vendor prefixes can still be necessary for some browsers (like Opera or WebKit based), or for compatibility with older versions of browsers (like Firefox with a prior of 16 .) See the compatibility chart at the bottom of the page can serve as a reference for the use of each property.</div>
<h2 id="Animatable_CSS_property_list">Animatable CSS property list</h2>
<p>CSS3 transitions and CSS3 animations can be used to animate CSS properties listed here: animatable CSS properties. This list also includes properties that can be animated SVG.</p>
<div class="note">
  Note: The set of properties that can be animated is subject to change and, as such, should avoid the inclusion of properties currently on the list can not be animated, because someday they could, causing unexpected results.</div>
<div class="note">
  Note: In Firefox, any property that has the auto value is not encouraged when its value changes in Firefox. See {{ bug("571344") }}for details.</div>
<h2 id="CSS_transition_properties">CSS transition properties</h2>
<p>CSS Transitions are controlled using quick<a href="https://developer.mozilla.org/en-US/docs/CSS/transition" title="https://developer.mozilla.org/en-US/docs/CSS/transition"> transition</a> property. This is the best way to configure transitions, as it makes it easier to avoid that the lengths of the parameter list are out of sync, which can be very frustrating to have to spend lots of time debugging the CSS.</p>
<p>You can control the individual components of the transition with the following sub-properties:</p>
<dl>
  <dt>
    {{ cssxref("transition-property") }}</dt>
  <dd>
    Specifies the name or names of the CSS&nbsp;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 id="Using_transition_timing_functions">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 id="A_transition_timing_effect_sampler">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 id="Using_a_delay">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 id="Using_a_linear_transition_timing_function">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") }}&nbsp;for details.</p>
<h4 id="Specifying_a_cubic_bezier_timing_function">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 id="Detecting_the_completion_of_a_transition">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.&nbsp;The <code>transitionend</code>&nbsp;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 id="When_property_value_lists_are_of_different_lengths">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 {
&nbsp; transition-property:&nbsp;opacity, left, top, height;
&nbsp; transition-duration: 3s, 5s;
}
</pre>
<p>This is treated as if it were:</p>
<pre class="brush: css">
div {
&nbsp; transition-property:&nbsp;opacity, left, top, height;
&nbsp; 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 {
&nbsp; transition-property:&nbsp;opacity, left;
&nbsp; transition-duration: 3s, 5s, 2s, 1s;
}</pre>
<p>This gets interpreted as:</p>
<pre class="brush: css">
div {
&nbsp; transition-property:&nbsp;opacity, left;
&nbsp; transition-duration: 3s, 5s;
}</pre>
<h2 id="Using_transitions_when_highlighting_menus">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;
  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;
  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;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}
</pre>
<p>This CSS&nbsp;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 <a class="external" href="/en/CSS/CSS_transitions#Browser_compatibility" title="en/CSS/CSS_transitions#Browser_compatibility">browser has transitions support</a>.</p>
<h2 id="Using_transitions_to_make_JavaScript_functionality_smooth">Using transitions to make JavaScript functionality smooth</h2>
<p>Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.</p>
<pre class="brush: html">
&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
&lt;div id="foo&gt;&lt;/div&gt;
</pre>
<p>Using JavaScript you can make the effect of moving the ball to a certain position happen:</p>
<pre class="brush: js">
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);
</pre>
<p>With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:</p>
<pre class="brush: css">
p {
  padding-left: 60px;

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition:  all 1s;
}
</pre>
<p>You can play with this here: <a class="external" href="http://jsfiddle.net/RwtHn/5/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</a></p>
<h2 id="Using_transition_events_to_animate_an_object">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>
<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>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 id="The_HTML">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>&nbsp;function in the JavaScript code is executed.</p>
<h3 id="The_CSS">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&nbsp;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;
  transition-property: background-color, color, left;
  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&nbsp;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;
  transition-property: background-color, color, left;
  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") }}&nbsp;property is 90% here.</p>
<h3 id="The_JavaScript_code">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&nbsp;animations</a> support is available, JavaScript code won't be necessary to achieve this effect.</div>
<p>First, the <code>runDemo()</code>&nbsp;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>&nbsp;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>&nbsp;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 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 (WebKit)</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</td>
        <td>10.5 {{ property_prefix("-o") }}</td>
        <td>3.2 {{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td><code>transitionend</code> event</td>
        <td>1.0 as <code>webkitTransitionEnd</code></td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>10.5 as <code>oTransitionEnd</code></td>
        <td>3.2 as <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&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br />
          {{ CompatGeckoMobile("16.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>10</td>
        <td>3.2</td>
      </tr>
      <tr>
        <td><code>transitionend</code> event</td>
        <td>2.1 as <code>webkitTransitionEnd</code></td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>10 as <code>oTransitionEnd</code></td>
        <td>3.2 as <code>webkitTransitionEnd</code></td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><span class="external">The specification:<a href="http://dev.w3.org/csswg/css3-transitions/" title="http://dev.w3.org/csswg/css3-transitions/"> CSS Transitions Module level 3</a></span></li>
  <li><span class="external">The complete <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS Reference</a></span></li>
  <li><span class="external">List of <a href="http://oli.jp/2010/css-animatable-properties/" title="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a></span></li>
  <li>{{ CSS_Reference:Transitions() }}</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
Revert to this revision