Peter Lindstrom

• How-Tos
• Programs
• Webcams
• Web Stats

CSS Animation Module (Draft)

It has been proposed that the new CSS 3 specification include an animation module that can be used to apply simple animations to elements within a web page. Sounds like a cool idea (although I do wonder about the long-term implications this will have on Adobe Flash if this module is indeed implemented in CSS 3, but that's another topic) so here's a quick intro and demonstation of the animation module. Please remember that the animation module is just a proposal so it may be changed, or even removed, at any time. However, as of this writing, the animation draft is supported by Safari, Opera, and Chrome browsers.

Transitions and Transformations

A transition is applied to the element's default state. The transition is used to specify what property to animate [none | all | opacity | ], the duration of the animation in seconds, and the timing of the animation [linear | ease-in | ease-out | ease-in-out].

There are currently three types of transformations available: scale (increase or decrease size of an object), translate (move an object up/down, or left/right), and rotate (rotate an object). Generally, a transformation is applied to an event, such as a hover event.

Take a look at this example, which sets the transition to animate all properties (all), last a duration of one second (1s) and use the ease-in-out timing. The hover event will apply a scale transformation to the div tag which will double the size of the div tag (2).

div {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

div:hover {
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-o-transform: scale(2);
}
		

Transformation Examples

Scale

#move_scale {
	width: 150px;
	margin: 0;
	padding: 10px;
	background-color: #cfa;
	border: 1px solid #0a0;
	text-align: center;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

#move_scale:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
}
		

This animation scale move the text "Hello world" when the mouse hovers over the text.

Translate

#move_translate {
	width: 150px;
	margin: 0;
	padding: 10px;
	background-color: #cfa;
	border: 1px solid #0a0;
	text-align: center;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
}

#move_translate:hover {
	-webkit-transform: translate(500px,0);
	-moz-transform: translate(500px,0);
	-o-transform: translate(500px,0);
}
		

This animation will move the text "Hello world" from the left side of the page to the right when the mouse hovers over the text.

Rotate

#move_rotate {
	width: 150px;
	margin: 0;
	padding: 10px;
	background-color: #cfa;
	border: 1px solid #0a0;
	text-align: center;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}
#move_rotate:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}
		

This animation will rotate the text "Hello world" 360 degrees when the mouse hovers over the text.

Combine Transformations

The CSS

#track{
	position: relative;
	width: 600px;
	height: 300px;
	padding: 0;
	border: 1px solid #ccc;
	background: #000 url('bg.png') no-repeat;
}

#car{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

#track img{
	position: absolute;
	left: 25px;
	top: 225px;
	width: 120px;
	height: 35px;
	margin: 0;
	padding: 0;
	border: none;
}

#peel_out{
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
}

#bldg{
	position: absolute;
	top: -225px;
	left: 393px;
	z-index: 99;
}

#bldg img{
	height: 300px;
	width: 182px;
}

#track:hover #car{
	-webkit-transform: translate(450px,-10px);
	-moz-transform: translate(450px,-10px);
	-o-transform: translate(450px,-10px);
}

#track:hover #peel_out{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
		

The HTML

<div id="track">
	<div id="bldg"><img src="bldg.png" alt="Building" /></div>
	<div id="car"><img src="car.png" alt="Race Car" id="peel_out" /></div>
</div>
		

This simple example demonstrates how you can combine several transformations (in this case translate and rotate) to a variety of elements, including the image tag. I'm sure there is an easier way to accomplish the same result, but I'm just playing around so this is good enough for me. That being said, I am always interested to know if you come up with a different way to accomplish the same thing or improve on this example.