mozilla

Revision 40496 of Using CSS transitions

  • Revision slug: CSS/CSS_transitions
  • Revision title: CSS transitions
  • Revision id: 40496
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Added new compatibility table; 76 words added

Revision Content

{{ gecko_minversion_header("2") }}

CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. 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.

Certain SVG properties can also be animated.

Note: Because the CSS transitions specification is still in draft form, all properties associated with them are 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.

CSS transition properties

CSS transitions are controlled using the {{ cssxref("-moz-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("-moz-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("-moz-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("-moz-transition-timing-function") }}
Specifies a cubic bezier curve used to define how intermediate values for properties are computed.
{{ cssxref("-moz-transition-delay") }}
Defines how long to wait between the time a property is changed and the transition actually begins.

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("-moz-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.

Properties that can be animated

CSS transitions and CSS animations can be used to animate the following properties.

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.
Property Value type
{{ cssxref("background-color") }} {{ Xref_csscolorvalue() }}
{{ cssxref("background-image") }} gradients only; not implemented in Firefox (see {{ bug("536540") }})
{{ cssxref("background-position") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("background-size") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("border-color") }} (including sub-properties) {{ Xref_csscolorvalue() }}
{{ cssxref("border-radius") }} (including sub-properties) {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("border-width") }} (including sub-properties) {{ Xref_csslength() }}
{{ cssxref("border-spacing") }} {{ Xref_csslength() }}
{{ cssxref("bottom") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("-moz-box-flex") }} number
{{ cssxref("box-shadow") }} shadow
{{ cssxref("color") }} {{ Xref_csscolorvalue() }}
{{ cssxref("-moz-column-count") }} number
{{ cssxref("-moz-column-gap") }} {{ Xref_csslength() }}, keywords
{{ cssxref("-moz-column-rule-color") }} {{ Xref_csscolorvalue() }}
{{ cssxref("-moz-column-rule-width") }} {{ Xref_csslength() }}, keywords
{{ cssxref("-moz-column-width") }} {{ Xref_csslength() }}
{{ cssxref("clip") }} rectangle
{{ svgattr("fill") }} paint
{{ svgattr("fill-opacity") }} opacity-value
{{ svgattr("flood-color") }} {{ Xref_csscolorvalue() }} | keywords
{{ cssxref("font-size") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("font-size-adjust") }} number, keywords
{{ cssxref("font-stretch") }} keywords
{{ cssxref("font-weight") }} number | keywords (excluding bolder, lighter)
{{ cssxref("height") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("-moz-image-region") }} rect()
{{ cssxref("left") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("letter-spacing") }} {{ Xref_csslength() }}
{{ svgattr("lighting-color") }} {{ Xref_csscolorvalue() }} | keywords
{{ cssxref("line-height") }} number | {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("margin") }} (including sub-properties) {{ Xref_csslength() }}
{{ cssxref("marker-offset") }} {{ Xref_csslength() }}
{{ cssxref("max-height") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("max-width") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("min-height") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("min-width") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("opacity") }} number
{{ cssxref("outline-color") }} {{ Xref_csscolorvalue() }}
{{ cssxref("outline-offset") }} integer
{{ cssxref("-moz-outline-radius") }} (including sub-properties) {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("outline-width") }} {{ Xref_csslength() }}
{{ cssxref("padding") }} (including sub-properties) {{ Xref_csslength() }}
{{ cssxref("right") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ svgattr("stop-color") }} {{ Xref_csscolorvalue() }} | keywords
{{ svgattr("stop-opacity") }} opacity-value
{{ svgattr("stroke") }} paint
{{ svgattr("stroke-dasharray") }} dasharray
{{ svgattr("stroke-dashoffset") }} {{ xref_csspercentage() }} | {{ xref_csslength() }}
{{ svgattr("stroke-miterlimit") }} miterlimit
{{ svgattr("stroke-opacity") }} opacity-value
{{ svgattr("stroke-width") }} {{ xref_csspercentage() }} | {{ xref_csslength() }}
{{ cssxref("text-indent") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("text-shadow") }} shadow
{{ cssxref("top") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("-moz-transform-origin") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}, keywords
{{ cssxref("-moz-transform") }} transform-function
{{ cssxref("vertical-align") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}, keywords
{{ cssxref("visibility") }} visibility
{{ cssxref("width") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("word-spacing") }} {{ Xref_csspercentage() }} | {{ Xref_csslength() }}
{{ cssxref("z-index") }} integer

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 {
  -moz-transition-property: opacity, left, top, height;
  -moz-transition-duration: 3s, 5s;
}

This is treated as if it were:

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

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

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

This gets interpreted as:

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

Examples

Note: For simplicity, the sample code snippets shown here only show support for Gecko; however, the live samples support Gecko, WebKit, and Opera.

A transition 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;
  -moz-transition-property: font-size;
  -moz-transition-duration: 4s;
  -moz-transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  -moz-transition-property: font-size;
  -moz-transition-duration: 4s;
  -moz-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.

-moz-transition-timing-function: linear;

There are several other standard timing functions available; see {{ cssxref("-moz-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:

  -moz-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).

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.

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;
  -moz-transition-property: background-color, color;
  -moz-transition-duration: 1s;
  -moz-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;
  -moz-transition-property: background-color, color;
  -moz-transition-duration: 1s;
  -moz-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.

If you're running a recent Gecko or WebKit nightly build, you can try this live example by clicking here.

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("-moz-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("-moz-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 updateTranslation() 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

Browser Basic support Property Transition ended event
Internet Explorer (none, as of IE9 pp7) --- ---
Firefox (Gecko) 4.0 (2.0) -moz-transition transitionend
Opera 10.5 -o-transition OTransitionEnd
Safari | Chrome | WebKit 3.2 | yes | yes -webkit-transition webkitTransitionEnd

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
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() }}

Revision Source

<p>{{ gecko_minversion_header("2") }}</p>
<p>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. 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>
<p>Certain SVG properties can also be animated.</p>
<div class="note"><strong>Note:</strong> Because the CSS transitions specification is still in draft form, all properties associated with them are 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>CSS transition properties</h2>
<p>CSS transitions are controlled using the {{ cssxref("-moz-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("-moz-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("-moz-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("-moz-transition-timing-function") }}</dt> <dd>Specifies a cubic bezier curve used to define how intermediate values for properties are computed.</dd> <dt>{{ cssxref("-moz-transition-delay") }}</dt> <dd>Defines how long to wait between the time a property is changed and the transition actually begins.</dd>
</dl>
<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("-moz-transition-delay") }}.</dd>
</dl>
<p>As usual, you can use the {{ domxref("element.addEventListener()") }} method to monitor for this event:</p>
<pre>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>Properties that can be animated</h2>
<p>CSS transitions and CSS animations can be used to animate the following properties.</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>
<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header">Property</td> <td class="header">Value type</td> </tr> <tr> <td>{{ cssxref("background-color") }}</td> <td>{{ Xref_csscolorvalue() }}</td> </tr> <tr> <td>{{ cssxref("background-image") }}</td> <td>gradients only; not implemented in Firefox (see {{ bug("536540") }})</td> </tr> <tr> <td>{{ cssxref("background-position") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("background-size") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("border-color") }} (including sub-properties)</td> <td>{{ Xref_csscolorvalue() }}</td> </tr> <tr> <td>{{ cssxref("border-radius") }} (including sub-properties)</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("border-width") }} (including sub-properties)</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("border-spacing") }}</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("bottom") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("-moz-box-flex") }}</td> <td>number</td> </tr> <tr> <td>{{ cssxref("box-shadow") }}</td> <td>shadow</td> </tr> <tr> <td>{{ cssxref("color") }}</td> <td>{{ Xref_csscolorvalue() }}</td> </tr> <tr> <td>{{ cssxref("-moz-column-count") }}</td> <td>number</td> </tr> <tr> <td>{{ cssxref("-moz-column-gap") }}</td> <td>{{ Xref_csslength() }}, keywords</td> </tr> <tr> <td>{{ cssxref("-moz-column-rule-color") }}</td> <td>{{ Xref_csscolorvalue() }}</td> </tr> <tr> <td>{{ cssxref("-moz-column-rule-width") }}</td> <td>{{ Xref_csslength() }}, keywords</td> </tr> <tr> <td>{{ cssxref("-moz-column-width") }}</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("clip") }}</td> <td>rectangle</td> </tr> <tr> <td>{{ svgattr("fill") }}</td> <td>paint</td> </tr> <tr> <td>{{ svgattr("fill-opacity") }}</td> <td>opacity-value</td> </tr> <tr> <td>{{ svgattr("flood-color") }}</td> <td>{{ Xref_csscolorvalue() }} | keywords</td> </tr> <tr> <td>{{ cssxref("font-size") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("font-size-adjust") }}</td> <td>number, keywords</td> </tr> <tr> <td>{{ cssxref("font-stretch") }}</td> <td>keywords</td> </tr> <tr> <td>{{ cssxref("font-weight") }}</td> <td>number | keywords (excluding <code>bolder</code>, <code>lighter</code>)</td> </tr> <tr> <td>{{ cssxref("height") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("-moz-image-region") }}</td> <td><code>rect()</code></td> </tr> <tr> <td>{{ cssxref("left") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("letter-spacing") }}</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ svgattr("lighting-color") }}</td> <td>{{ Xref_csscolorvalue() }} | keywords</td> </tr> <tr> <td>{{ cssxref("line-height") }}</td> <td>number | {{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("margin") }} (including sub-properties)</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("marker-offset") }}</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("max-height") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("max-width") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("min-height") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("min-width") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("opacity") }}</td> <td>number</td> </tr> <tr> <td>{{ cssxref("outline-color") }}</td> <td>{{ Xref_csscolorvalue() }}</td> </tr> <tr> <td>{{ cssxref("outline-offset") }}</td> <td>integer</td> </tr> <tr> <td>{{ cssxref("-moz-outline-radius") }} (including sub-properties)</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("outline-width") }}</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("padding") }} (including sub-properties)</td> <td>{{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("right") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ svgattr("stop-color") }}</td> <td>{{ Xref_csscolorvalue() }} | keywords</td> </tr> <tr> <td>{{ svgattr("stop-opacity") }}</td> <td>opacity-value</td> </tr> <tr> <td>{{ svgattr("stroke") }}</td> <td>paint</td> </tr> <tr> <td>{{ svgattr("stroke-dasharray") }}</td> <td>dasharray</td> </tr> <tr> <td>{{ svgattr("stroke-dashoffset") }}</td> <td>{{ xref_csspercentage() }} | {{ xref_csslength() }}</td> </tr> <tr> <td>{{ svgattr("stroke-miterlimit") }}</td> <td>miterlimit</td> </tr> <tr> <td>{{ svgattr("stroke-opacity") }}</td> <td>opacity-value</td> </tr> <tr> <td>{{ svgattr("stroke-width") }}</td> <td>{{ xref_csspercentage() }} | {{ xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("text-indent") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("text-shadow") }}</td> <td>shadow</td> </tr> <tr> <td>{{ cssxref("top") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("-moz-transform-origin") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}, keywords</td> </tr> <tr> <td>{{ cssxref("-moz-transform") }}</td> <td>transform-function</td> </tr> <tr> <td>{{ cssxref("vertical-align") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}, keywords</td> </tr> <tr> <td>{{ cssxref("visibility") }}</td> <td>visibility</td> </tr> <tr> <td>{{ cssxref("width") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("word-spacing") }}</td> <td>{{ Xref_csspercentage() }} | {{ Xref_csslength() }}</td> </tr> <tr> <td>{{ cssxref("z-index") }}</td> <td>integer</td> </tr> </tbody>
</table>
<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="deki-transform">div {
  -moz-transition-property: opacity, left, top, height;
  -moz-transition-duration: 3s, 5s;
}
</pre>
<p>This is treated as if it were:</p>
<pre class="deki-transform">div {
  -moz-transition-property: opacity, left, top, height;
  -moz-transition-duration: 3s, 5s, 3s, 5s;
}</pre>
<p>Similarly, if any property's value list is longer than that for {{ cssxref("-moz-transition-property") }}, it's truncated, so if you have the following CSS:</p>
<pre class="brush: css">div {
  -moz-transition-property: opacity, left;
  -moz-transition-duration: 3s, 5s, 2s, 1s;
}</pre>
<p>This gets interpreted as:</p>
<pre class="brush: css">div {
  -moz-transition-property: opacity, left;
  -moz-transition-duration: 3s, 5s;
}</pre>
<h2>Examples</h2>
<div class="note"><strong>Note:</strong> For simplicity, the sample code snippets shown here only show support for Gecko; however, the live samples support Gecko, WebKit, and Opera.</div>
<h3>A transition effect sampler</h3>
<p>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 <a class=" external" href="http://developer.mozilla.org/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="http://developer.mozilla.org/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, 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;
  -moz-transition-property: font-size;
  -moz-transition-duration: 4s;
  -moz-transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  -moz-transition-property: font-size;
  -moz-transition-duration: 4s;
  -moz-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>-moz-transition-timing-function: linear;
</pre>
<p>There are several other standard timing functions available; see {{ cssxref("-moz-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>  -moz-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>
<h3>Highlighting menus</h3>
<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>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>.menuButton {
  position: relative;
  -moz-transition-property: background-color, color;
  -moz-transition-duration: 1s;
  -moz-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;
  -moz-transition-property: background-color, color;
  -moz-transition-duration: 1s;
  -moz-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>
<h3>Using transition events to animate an object</h3>
<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>If you're running a recent Gecko or WebKit nightly build, you can <a href="/samples/cssref/transitions/sample1" title="https://developer.mozilla.org/samples/cssref/transitions/sample1">try this live example by clicking here</a>.</p>
<h4>The HTML</h4>
<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>
<h4>The CSS</h4>
<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("-moz-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("-moz-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>
<h4>The JavaScript code</h4>
<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>updateTranslation()</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>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Basic support</th> <th>Property</th> <th>Transition ended event</th> </tr> <tr> <td>Internet Explorer</td> <td>(none, as of IE9 pp7)</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>4.0</strong> (2.0)</td> <td><code>-moz-transition</code></td> <td><code>transitionend</code></td> </tr> <tr> <td>Opera</td> <td><strong>10.5</strong></td> <td><code>-o-transition</code></td> <td><code>OTransitionEnd</code></td> </tr> <tr> <td>Safari | Chrome | WebKit</td> <td>3.2 | yes | yes</td> <td><code>-webkit-transition</code></td> <td><code>webkitTransitionEnd</code></td> </tr> </tbody>
</table>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</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>
Revert to this revision