<< other stuff

CSS3 Demo: Transitions

Last updated: 5 June 2011

Transitions is a feature of CSS3 that allows designers to add various effects — animation, colour shifts, etc — to parts of a webpage.

As of the last update, this feature was supported by Firefox 4.0 and above, Opera 10.5 and above, and WebKit browsers equivalent to Safari 3.2 and above. No version of Internet Explorer supports it yet.


Contents

Example 1: Link Colour

Code

CSS Code
a.blueToRed {
	color: blue;
}

a.blueToRed:hover {
	-webkit-transition: color 0.5s linear 0s;
	-moz-transition: color 0.5s linear 0s;
	-o-transition: color 0.5s linear 0s;
	transition: color 0.5s linear 0s;
	color: red;
}
HTML Code
<a href="#" class="blueToRed">Mouse over me</a>

Live Examples

With transition:Mouse over me
Without transition:Mouse over me too

Notice the need to repeat the definition with different prefixes ("-webkit-", etc) since this feature has not been finalised yet.

Going through each of the values given above for the transition properties:

For this example, since the color value for .blueToRed is set as blue and .blueToRed:hover as red, the browser transitions the link text colour from blue to red over 0.5 seconds as specified.

As an extra note, unless you are aiming for a striking visual effect, for most pages I would expect that a more subtle colour change would be more appropriate. Consider the following examples:

Subtle (near-black to blue-green):Mouse over me
Not-so-subtle (black to yellow):Mouse over me


Example 2: Positioning - Lorry

Code

CSS Code
.exampleBox #lorry {
	position: relative;
	left: 0px;
	width: 48px;
	height: 48px;
}

.exampleBox:hover #lorry {
	-webkit-transition: left 2s ease-in-out 0s;
	-moz-transition: left 2s ease-in-out 0s;
	-o-transition: left 2s ease-in-out 0s;
	transition: left 2s ease-in-out 0s;
	left: 75%;
}
HTML Code
<div class="exampleBox">
	<img src="css3_demo_transitions/lorry.gif" id="lorry" alt="a lorry">
</div>

Live Example

Put your cursor over this box to start the lorry.
a lorry

Since left (along with its family, top, bottom, right) is also a property that may be affected with CSS transitions, we may make use of it to animate page elements.

Here, it is used to animate the lorry in the box when you put your cursor over the box.

Also, notice the use of ease-in-out to affect how the lorry animates. You should find the lorry accelerating from the start and then decelerating towards the end.


Example 3: Positioning / Multiple Properties - Aeroplane

Code

CSS Code
.exampleBox #aeroplane {
	position: relative;
	width: 48px;
	height: 48px;
	bottom: -240px;
	left: 0%;
}

.exampleBox:hover #aeroplane {
	-webkit-transition: left 2s linear 0s, bottom 1.5s ease-in 0.5s;
	-moz-transition: left 2s linear 0s, bottom 1.5s ease-in 0.5s;
	-o-transition: left 2s linear 0s, bottom 1.5s ease-in 0.5s;
	transition: left 2s linear 0s, bottom 1.5s ease-in 0.5s;
	bottom: 0px;
	left: 75%;
}
HTML Code
<div class="exampleBox" style="height: 300px;">
	<img src="css3_demo_transitions/plane.png" id="aeroplane" alt="an aeroplane">
</div>

Live Example

Put your cursor over this box to start the aeroplane.
an aeroplane

Here the bottom and left properties are changed when you place your cursor over the box. By using a comma separated list, we can set transition for multiple properties.

By assigning the transition-delay value, the upward animation does not start until half a second after mouse-over.

Also, the use of ease-in for the transition-timing-function value should make the plane look like it's accelerating slightly on liftoff. For the full list of transition-timing-function values, see this page.


Example 4: Positioning with Javascript - Turtle

Code

CSS Code
.exampleBox #turtle {
	position: relative;
	height: 24px;
	width: 24px;
}

.start #turtle {
	-webkit-transition: left 60s linear 0s;
	-moz-transition: left 60s linear 0s;
	-o-transition: left 60s linear 0s;
	transition: left 60s linear 0s;
	left: 0%;
}
Javascript Code
function pushTurtle() {
	document.getElementById("turtle").style.left = "75%";
}
HTML Code
<div class="exampleBox start" onclick="pushTurtle()">
	<img src="css3_demo_transitions/turtle.png" id="turtle" alt="a turtle">
</div>

Live Example

Click this box to move the turtle.
a turtle

CSS transitions also allow the animating of page elements when their style is changed with Javascript. While you could animate a page element purely with Javascript, this provides an alternative way to do it without writing a loop or recurring function.

Here, pushTurtle() is called when the user clicks the box. In the pushTurtle() function the value for the left DOM style property is changed and the browser animates the transition as defined in the transition property for the #turtle element.

Similarly, switching the class attribute for the element using Javascript also transitions the element between the values defined in the two classes. You can view this page's source and find the function pushTurtleWithClass() to see one way you may do this.


Final Notes

Aside from the properties illustrated in the above examples, CSS transitions may be used to animate many other properties. For a full list, see this page.

While CSS transitions provide many interesting possibilities, since it is not supported by Internet Explorer at all, it might not be advisable to use it for any critical purpose.

However, for browsers that support it, their use for non-critical animations adds a good bit of visual flair to pages without the need for much extra code.


References / Extra Reading

CSS transitions — MDC Docs
https://developer.mozilla.org/en/CSS/CSS_transitions
(The examples here mostly use an alternate method to declare transitions for multiple properties. Both methods work.)
CSS Transitions 101 | Webdesigner Depot
http://www.webdesignerdepot.com/2010/01/css-transitions-101/
(This link only includes the transition property for WebKit browsers, though at the time it was written it is possible transitions have not been implemented elsewhere.)
CSS Transitions Module Level 3 — W3C Working Draft
http://www.w3.org/TR/css3-transitions/


This page and the included examples were created by Quentin Pan (www.qponstuff.com).

Images by the following were used: