CSS properties used to define transitions

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

(Note that these transitions loop infinitely only for the purpose of our examples; CSS transitions only visualize a property change from start to finish. If you need visualizations that loop, look into the CSS animation property.)

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-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s
transition-timing-function: Specifies a function to define how intermediate values for properties are computed. 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. You can also choose easing from Easing Functions Cheat Sheet.

transition-timing-function: ease

transition-timing-function: linear

transition-timing-function: step-end

transition-timing-function: steps(4, end)
transition-delay: Defines how long to wait between the time a property is changed and the transition actually begins.

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

The shorthand CSS syntax is written as follows:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Detecting the completion of a transition

There is a single event that is fired when transitions complete. In all standard-compliant browser, the event is transitionend, 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;
}

A simple example

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 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/

Specifications

Specification	Status	Comment
CSS Transitions	Working Draft	Initial specification.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 -webkit 26.0	4.0 (2.0) -moz 16.0 (16.0)	10	10.5 -o 12.10	3.2 -webkit
`transitionend` event	1.0 as `webkitTransitionEnd` 26.0	4.0 (2.0)	10	10.5 as `oTransitionEnd` 12 as `otransitionend` 12.10 as `transitionend`	3.2 as `webkitTransitionEnd`

Pages