Using CSS transitions

The CSS transitions, which are part of the CSS3 set of specifications, 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 that can be specified, following an acceleration curve that can be customized.

Animatable CSS property list

CSS3 transitions and animations can be used to animate CSS properties listed in this document. This list also includes properties that can be animated SVG.

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:

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. Most timing functions 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. You can also choose easing from Easing Functions Cheat Sheet.

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);

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;
  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 :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 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;
  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 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.

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

See also

• The specification: CSS Transitions Module level 3
• The complete CSS Reference
• CSS3 Dock Menu using CSS transitions
• List of CSS animatable properties
• Transitions-related properties: transition, transition-delay, transition-duration, transition-property, transition-timing-function.