An Introduction to CSS3 Transitions

CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.

Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more. Keep reading for further details of supported properties.

At present the CSS3 Transitions module is at the working draft stage of development, and as such elements of the specification and syntax could still be liable to change. Although browser support is relatively widespread, for the time being you’ll need to use several vendor prefixes in your code for a cross-browser solution.

Here’s a basic example. The boxes below initially have an orange background, with the color set to change to green on :hover. For the first box no transition is specified, so the change occurs instantaneously. For the second box a transition with a duration of 5 seconds is specified, as such the change occurs smoothly over the given duration and automatically reverses when the mouse is moved off the element.

Example 1: No Transition
Example 2: 5 Second Transition

The code for this example can be found later in the article.

How Transitions Work

The CSS3 Transitions module introduces a number of properties which together can be used to specify: the CSS property (or properties) to be transitioned; the duration of the transition; the timing function of the transition; and an optional delay.

These properties are as follows:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

The module also introduces the transition shorthand property, which can be used to set the values for the above four properties simultaneously.

We will firstly look at the individual transition-* properties to demonstrate how each works, before going on to look at the shorthand syntax.

Step 1: transition-property

The first step in creating a transition effect is to specify which CSS property (or properties) the transition effect will be applied to. This can be done using the transition-property property, which can accept one of two keywords, all (the initial value) or none, or a comma-separated list of properties.

The Syntax:
transition-property: none | all | [ <IDENT> ] [, <IDENT> ]*

Examples:
transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

If the all keyword is specified, or if transition-property is omitted, every property that is able to undergo a transition will do so, ie. every property for which a change has been specified and that is capable of supporting transitions.

If the none keyword is specified, no property will undergo a transition.

As with multiple background images, multiple transitions can be specified using a comma separated list. If multiple values are specified for transition-property, multiple values should also be specified for the other transition-* properties, with the corresponding values in each list being matched in order.

A full list of animatable CSS properties, ie. those that are able to undergo a transition, can be found here in section 6 of the CSS3 Transitions specification.

Step 2: transition-duration

The transition-duration property accepts a comma-separated list of times, specified in seconds or milliseconds, which determine how long the corresponding properties (specified using transition-property) take to complete their transition.

The Syntax:
transition-duration: <time> [, <time>]*

Examples:
transition-duration: 2s;
transition-duration: 4000ms;
transition-duration: 4000ms, 8000ms;

The transition-duration property’s initial value is 0, meaning that the transition is instantaneous.

Negative values for transition-duration are treated as 0.

Note: The transition-duration property is in fact the only property required to create a transition effect, as if transition-property is not supplied, all properties that are able to undergo a transition will do so.

Step 3: transition-timing-function

The transition-timing-function property is used to specify how the pace of the transition changes over its duration. This can be done in one of two ways. Either by specifying a number of pre-defined keywords (ease, linear, ease-in, ease-out or ease-in-out), or by defining a custom timing function (by specifying four coordinates to define a cubic bezier curve).

The Syntax:
transition-timing-function: <timing-function> [, <timing-function>]*

<timing-function> = ease | linear | ease-in | ease-out | ease-in-out

or

<timing-function> = cubic-bezier(<number>, <number>, <number>, <number>)

Examples:
transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

Let’s first take a look at the pre-defined timing functions available.

The example below demonstrates how each different function behaves. Each box below will expand in width from 150px to 500px when the example is hovered over, with all transitions being of the same duration (3 seconds) and triggered simultaneously.

ease
linear
ease-in
ease-out
ease-in-out

The code for this example can be found in the examples section below.

In addition to the pre-defined timing functions, custom timing functions can be declared using the cubic-bezier function. According to the specification:

The timing function is specified using a cubic bezier curve, which is defined by four control points, P0 through P3 (see diagram below). P0 and P3 are always set to (0,0) and (1,1). The ‘transition-timing-function’ property is used to specify the values for points P1 and P2. These can be set to preset values using the keywords listed (see above), or can be set to specific values using the ‘cubic-bezier’ function. In the ‘cubic-bezier’ function, P1 and P2 are each specified by both an X and Y value.

Diagram: Timing Function Control Points

Diagram: Timing Function Control Points

If you’re not familiar with cubic bezier curves, more information on defining custom timing functions can be found in section 2.3 of the CSS3 Transitions specification here.

If no timing function is specified, the default value is ease.

Step 4: transition-delay

The final step in a creating a transition effect is to specify an optional delay using the transition-delay property. As with the transition-duration property, the transition-delay property accepts a comma-separated list of times, specified in seconds or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting. The default value is 0, ie. the transition will commence as soon as triggered.

Negative values are accepted for transition-delay. When supplied the transition will commence as soon as triggered, however it will appear to have begun execution at the specified offset, ie; the transition effect will begin part-way through its cycle (see the examples section below for an example).

The Syntax:
transition-delay: <time> [, <time>]*

Examples:
transition-delay: 5s;
transition-delay: 4000ms, 8000ms;
transition-delay: -5s;

The transition shorthand property

The transition shorthand property can be used in place of the individual transition-* properties described above.

Let’s take a look at the syntax.

The Syntax:
transition: <transition> [, <transition>]*

<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

As with the individual transition-* properties, the transition shorthand property can be used to define multiple transitions, using a comma separated list.

Note: The only value required to create a transition is that of transition-duration.

Examples:
transition: background-color 3s linear 1s;
transition: 4s ease-in-out;
transition: 5s;

Browser Support

Chrome Firefox IE Safari Opera
transition-property 4.0 4.0 10.0 3.1 10.5
transition-duration 4.0 4.0 10.0 3.1 10.5
transition-timing-function 4.0 4.0 10.0 3.1 10.5
transition-delay 4.0 4.0 10.0 3.1 10.5
transition 4.0 4.0 10.0 3.1 10.5
Table key:

#native property support (without vendor prefix), since version indicated

#experimental property support (with vendor prefix, eg. -webkit-, -moz-), since version indicated

Although the CSS3 Transitions module is still at the working draft stage of development, and parts of the specification could still be subject to change, browser support has grown of late with the latest versions of most major web browsers supporting CSS3 Transitions.

Given the experimental nature of the CSS3 Transitions specification, you’ll need to use various different vendor prefixes for the moment, as you might expect.

As CSS3 Transitions originated from …. , support was added to the Webkit layout engine as far back as October 2007, with Apple’s Safari and Google’s Chrome web browsers incorporating support for sometime now, since versions 3.1 and 4.0 respectively. As you’d expect the -webkit- prefix is required.

Opera was the next browser to add support in March 2010. CSS3 Transitions have been supported, with the -o- prefix, since Opera version 10.5 (presto 2.3).

Mozilla’s Firefox browser offers support for CSS3 Transitions since version 4.0 (Gecko 2.0) with the -moz- prefix.

Although late to the party Microsoft have been working hard to catch up and the next offering of their popular Internet Explorer browser, IE10 – due for release later this year (platform preview available now), offers support for CSS3 Transitions with the -ms- prefix.

Cross Browser Examples

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even the IE10 platform preview. We’ve used the transition shorthand property in each of our examples, as with the number of vendor prefixes currently required for a cross browser solution, the code gets far too long using the individual transition-* properties.

Example A: A basic transition

Here’s the example of a basic transition from the introduction to this article. The boxes below initially have an orange background, with the color set to change to green on :hover. For the first box no transition is specified, so the change occurs instantaneously. For the second box a transition with a duration of 5 seconds is specified, as such the change occurs smoothly over the given duration and automatically reverses when the mouse is moved off the element.

Example 1: No Transition
Example 2: 5 Second Transition

Here’s the code for this example:

#box1 {
width: 580px;
padding: 9px 15px;
background-color: #ED8029;
color: white;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 5px;
}

#box1:hover {
background-color: #A7B526;
}

#box2 {
width: 580px;
padding: 9px 15px;
background-color: #ED8029;
color: white;
border-radius: 5px;
-webkit-transition: background-color 5s;
-moz-transition: background-color 5s;
-o-transition: background-color 5s;
-ms-transition: background-color 5s;
transition: background-color 5s;
}

#box2:hover {
background-color: #A7B526;
}

Note that the transition effect is applied to the original element rather than the hover state.

Example B: Transition timing functions

Again an example from earlier in the article, demonstrating how the various timing functions behave. Each box below will expand in width from 150px to 500px when the example is hovered over, with all transitions being of the same duration (3 seconds) and triggered simultaneously.

ease
linear
ease-in
ease-out
ease-in-out

Here’s the code for this example:

#ExampleB {
width: 520px;
}

#ExampleB div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ED8029;
text-align: right;
border-radius: 5px;
}

#ExampleB:hover div {
width: 500px;
}

#ExampleB div.ease {
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}

#ExampleB div.linear {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}

#ExampleB div.easein {
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
-ms-transition: 3s ease-in;
transition: 3s ease-in;
}

#ExampleB div.easeout {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}

#ExampleB div.easeinout {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}

Example C: Transition delay

Our next example demonstrates the use of transition-delay. Each of the transitions below will trigger simultaneously when the example is hovered over, however, each has a different delay specified.

-2s delay
no delay
1s delay
2s delay
3s delay
5s delay

Here’s the code for this example:

#ExampleC {
width: 520px;
}

#ExampleC div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ED8029;
text-align: right;
border-radius: 5px;
}

#ExampleC:hover div {
width: 500px;
}

#ExampleC div.no {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}

#ExampleC div.one {
-webkit-transition: 3s linear 1s;
-moz-transition: 3s linear 1s;
-o-transition: 3s linear 1s;
-ms-transition: 3s linear 1s;
transition: 3s linear 1s;
}

#ExampleC div.two {
-webkit-transition: 3s linear -2s;
-moz-transition: 3s linear -2s;
-o-transition: 3s linear -2s;
-ms-transition: 3s linear -2s;
transition: 3s linear -2s;
}

#ExampleC div.three {
-webkit-transition: 3s linear 3s;
-moz-transition: 3s linear 3s;
-o-transition: 3s linear 3s;
-ms-transition: 3s linear 3s;
transition: 3s linear 3s;
}

#ExampleC div.five {
-webkit-transition: 3s linear 5s;
-moz-transition: 3s linear 5s;
-o-transition: 3s linear 5s;
-ms-transition: 3s linear 5s;
transition: 3s linear 5s;
}

#ExampleC div.minustwo {
-webkit-transition: 3s linear -2s;
-moz-transition: 3s linear -2s;
-o-transition: 3s linear -2s;
-ms-transition: 3s linear -2s;
transition: 3s linear -2s;
}

Example D: Transition of input field on :focus

The input element below will expand in size, change background color and gain an inset box shadow on :focus:


Here’s the code for this example:

input#exampletransitiond {
width: 200px;
padding: 10px;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 10px;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}

input#exampletransitiond:focus {
width: 300px;
background-color: #E7FBF8;
outline: none;
-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
box-shadow: inset inset 0 0 5px rgba(0,0,0,0.5);
}

Example E: On a roll

The box below with rotate through 360 degrees (using CSS3 2D Transforms), move from left to right (via an increased margin), grow in size (using width and height) and gain a drop shadow (using box-shadow) when the example is hovered over.

Here’s the code for this example:

div.exampletransitione {
width: 500px;
height: 60px;
margin: 20px 0;
}

div.exampletransitione div.transition {
width: 20px;
height: 20px;
background-color: #ED8029;
color: #fff;
padding: 10px;
border-radius: 5px;
margin-left: 0;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}

div.exampletransitione:hover div.transition {
width: 50px;
height: 50px;
margin-left: 400px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Example F: Multiple transitions

The example below demonstrates multiple transitions, which can be specified using a comma separated list. When you hover over the example below, the inner div will firstly move from left to right over 3 seconds. Then, a second transition will change the background color from red to green – the second transition is delayed by 3 seconds so as to start when the first transition has completed.

Here’s the code for this example:

div.exampletransitionf {
width: 500px;
height: 60px;
margin: 20px 0;
}

div.exampletransitionf div.transition {
width: 50px;
height: 50px;
background-color: red;
padding: 10px;
border-radius: 5px;
margin-left: 0;
-webkit-transition: margin-left 3s linear, background-color 2s ease 3s;
-moz-transition: margin-left 3s linear, background-color 2s ease 3s;
-o-transition: margin-left 3s linear, background-color 2s ease 3s;
-ms-transition: margin-left 3s linear, background-color 2s ease 3s;
transition: margin-left 3s linear, background-color 2s ease 3s;
}

div.exampletransitionf:hover div.transition {
margin-left: 400px;
background-color: green;
}

Advanced examples

Here are a few advanced examples from around the web, putting CSS3 Transitions to more creative use:

Essentially a gallery of basic transitions, it aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated.
Created by: Lea Verou


An experiment with text shadows and with transitions in order to achieve a blur effect menu. The main idea is to blur the other items while enhancing the one we are currently hovering over.
Created by: Mary Lou


Essentially a gallery of basic transitions, it aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated.
Created by: Natalie Downe


Additional Notes & Further Reading

Further details regarding CSS3 Transitions and how they work can be found in the CSS3 Transitions working draft specification here.


OUR SPONSORS

Advertise here?
TAG CLOUD