CSS transitions

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.

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

CSS3 transitions and CSS3 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.
Note: In Firefox, any property having the value auto is not animated when its value changes in Firefox. See bug 571344 for details.

CSS transition properties

CSS transitions are controlled using the 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:

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.
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.
transition-timing-function
Specifies a cubic bezier curve used to define how intermediate values for properties are computed.
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 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 transition-delay .

As usual, you can use the 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 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 :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;
  -moz-transition: all 1s; 
  -webkit-transition: all 1s;  
  -ms-transition: all 1s;  
  -o-transition: all 1s;  
  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;
  -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 transition-property property is used to list the CSS properties we wish to have animated. In this case, the properties to animate are background-color , color , and left . The 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 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 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

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 4.0 (2) 10 10.5 3.2
Property -webkit-transition -moz-transition -ms-transition -o-transition -webkit-transition
Transition ended event webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd webkitTransitionEnd
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 4.0 (2) ? 10 3.2

Tags (7)

Edit tags

Attachments (1)

FileSizeDateAttached by 
transition-timing-function.png
No description
19.95 kB22:59, 29 Apr 2011borismusActions

Attach file