facebook google plus twitter
Webucator's Free CSS Tutorial

Lesson: Transforms and Transitions

Welcome to our free CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

CSS3 introduces transitions and transforms - powerful tools to create visually interesting, complex animations and effects without the use of JavaScript.

Lesson Goals

  • Use transition to animate changes to an element's style.
  • Use transform to move, scale, rotate, and skew elements in two or three dimension.

Transitions

A few years ago, we might have turned to JavaScript (and, before that, to Flash) to present users with interactive animations: a delayed change to the background color of a moused-over link, perhaps, or a fade-in effect on the opening or closing of a drop-down menu. While JavaScript and other technologies still have their place, CSS3 now affords us the ability to powerfully - and simply - add motion effects to spice up our pages.

The CSS3 transition property defines how an element changes from one state to another. With transition - or the specific properties, listed below, for which transition serves as a shorthand - we can stretch out the change on an element's width, background color, or other property over a specified duration. We'll need to be sure that we include appropriate vendor prefixes for transitions: -moz- for older version of Firefox, webkit for older versions of Chrome/Safari, and -o- for older versions of Opera. Internet Explorer supports CSS transitions, unprefixed, from version 10+.

CSS Transition Properties
Property Description/Example
transition

Shorthand for setting all four properties in one statement

transition:width 3s ease 1s
transition-property

Specific property/ies for which transition will occur, or all (default) or none

transition-property: width, top
transition-duration

Length, in specified time units, of the transition. With duration specified as "0" (or if not specified, and thus defaulting to "0"), no visible effect will take place

transition-duration: 1s
transition-timing-function

Defines the easing function of the transition - how the speed of the transition will change over the course of the duration. Possible values are linear, ease (default), ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)

transition-timing-function: ease-out
transition-delay

Delay, in specified time units, after which transition will occur; default is 0

transition-delay: 3s

Let's look at an example that illustrates the use of the transition property:

Code Sample:

TransformsTransitions/Demos/transitions.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 Transitions</title>
	<style>
		#trans1 {
			width: 160px;
			height: 160px;
			padding: 20px;
			float: left;
			background-color: hsl(20, 50%, 20%);
			color: hsl(0, 100%, 100%);
			-moz-transition: width 2s;
			-webkit-transition: width 2s;
			-o-transition: width 2s;
			transition: width 2s;
		}
		#trans1:hover {
			width: 100px;
			height: 100px;
			background-color: hsl(30, 50%, 90%);
			color: hsl(0, 0%, 0%);
		}

		#trans2 {
			margin-left: 20px;
			width: 400px;
			height: 160px;
			padding: 20px;
			float: left;
			background-color: hsl(0, 0%, 0%);
			color: hsl(0, 100%, 100%);
			position: relative;
		}
		#positioned {
			width: 80px;
			height: 80px;
			padding: 20px;
			background-color: hsl(0, 68%, 32%);
			font-size: 12px;
			position: absolute;
			left: 10px;
			-moz-transition-duration: 2s;
			-webkit-transition-duration: 2s;
			-o-transition-duration: 2s;
			transition-duration: 2s;
			-moz-transition-timing-function: ease-in;
			-webkit-transition-timing-function: ease-in;
			-o-transition-timing-function: ease-in;
			transition-timing-function: ease-in;
			-moz-transition-delay: 1s;
			-webkit-transition-delay: 1s;
			-o-transition-delay: 1s;
			transition-delay: 1s;
		}
		#trans2:hover #positioned {
			left: 310px;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>CSS3 Transitions</h1>
		<div id="trans1">
			<p>Mouseover me - width changes</p>
		</div>
		<div id="trans2">
			<div id="positioned">
				<p>I am a positioned</p>
			</div>
		</div>
	</div>
</body>
</html>

Open ClassFiles/TransformsTransitions/Demos/transitions.html in a code editor to view the code and a browser to view the result. The page presents two main elements: a brown square on the left with white text "Mouseover me - width changes", and a black rectangle (on the right) containing a smaller red rectangle; the red rectangle is positioned absolutely, 10 pixels from the left edge of the black rectangle:

CSS 3 Transitions

We use #trans1:hover to change the width, height, background color, and text color of the left (brown) square when the user mouses over the element. Note that the CSS transition property is set on #trans1, not on #trans1:hover. We use the shorthand property here to state that the transition will apply only to the width change - not for the height, background color, or text color changes - and that it will occur over a duration of two seconds. The page looks like this after the transition finishes:

CSS 3 Transitions

Note that the transition runs in reverse when the user mouses out of the left square: the width changes, over the course of two seconds, back to its original 160 pixel value.

We use the specific transition properties (instead of the shorthand) for the right element: mousing over the right (black) containing box changes the contained (#positioned) element's left value from 10 pixels to 310 pixels. After a transition-delay of one second, over a duration of two seconds, and with a timing function ease-in, mousing over the right element has the effect of animating the red box - it waits a second to start, begins slowly, then picks up speed. Here's the page after the right transition finishes:

CSS 3 Transitions

Two Dimensional Transforms

CSS3 gives us the transform property, which allows us to easily position, stretch, scale, and rotate elements. Here's a list of the valid values (functions) for the transform property:

2D Transform Methods
Method Example
translate translate(10px, -20px) moves the element 10 pixels left and 20 pixels up from its original position; can use translateX or translateY for horizontal or vertical positioning
rotate rotate(20deg) rotates the element 20 degrees clockwise; negative values rotate counter-clockwise
scale scale(2,3.5) stretches the element to be twice as wide and 3.5 times as tall; can also use scaleX or scaleY to specify horizontal or vertical scaling
skew skew(10deg, 20deg) turns the element 10 degrees about the X axis and 20 degrees about the Y axis; can also use skewX or skewY to control X- and Y-axis skew
matrix matrix(0.75,0.5,-0.5,1.5,20,0) allows us to specify all of the above methods at once according to a square matrix - see the W3C website for more description of using the matrix function (but be sure to dig up a linear algebra textbook for reference!)

Browser support for transforms is catching up; newer versions of desktop and mobile browser support the property well. Vendor prefixes are recommended - we won't show the prefixes when discussing syntax but will use as appropriate in demos and exercises. Internet Explorer supports transform from version 9 (with -ms- prefix) and without the prefix in version 10.

We'll examine each of the various transform methods in the next example.

Code Sample:

TransformsTransitions/Demos/transforms.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 2D Transforms</title>
	<style type="text/css">
		div.example {
			width: 140px;
			height: 200px;
			background-color: hsl(0, 20%, 70%);
			margin: 0 5px 20px 0;
			padding: 3px 10px;
			text-align: center;
			float: left;
		}
		div.example div {
			width: 50px;
			height: 50px;
			background-color: hsl(0, 20%, 20%);
		}
		div.example code {
			display: block;
			font-size: 0.8em;
			padding: 10px;
		}
		#translate:hover div {
			-webkit-transform: translate(50px, 100px);
			-moz-transform: translate(50px, 100px);
			-ms-transform: translate(50px, 100px);
			-o-transform: translate(50px, 100px);
			transform: translate(50px, 100px);
		}
		#rotate:hover div {
			-webkit-transform: rotate(20deg);
			-moz-transform: rotate(20deg);
			-ms-transform: rotate(20deg);
			-o-transform: rotate(20deg);
			transform: rotate(20deg);
		}
		#scale:hover div {
			-webkit-transform: scale(2.5, 3);
			-moz-transform: scale(2.5, 3);
			-ms-transform: scale(2.5, 3);
			-o-transform: scale(2.5, 3);
			transform: scale(2.5, 3);
		}
		#skew:hover div {
			-webkit-transform: skew(10deg, 30deg);
			-moz-transform: skew(10deg, 30deg);
			-ms-transform: skew(10deg, 30deg);
			-o-transform: skew(10deg, 30deg);
			transform: skew(10deg, 30deg);
		}
		#matrix:hover div {
			-webkit-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			-moz-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			-ms-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			-o-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			transform: matrix(0.75,0.5,-0.5,1.5,20,0);
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>CSS3 2D Transforms</h1>
		<div class="example" id="translate"><code>translate()</code><div></div></div>
		<div class="example" id="rotate"><code>rotate()</code><div></div></div>
		<div class="example" id="scale"><code>scale()</code><div></div></div>
		<div class="example" id="skew"><code>skew()</code><div></div></div>
		<div class="example" id="matrix"><code>matrix()</code><div></div></div>
	</div>
</body>
</html>

Open ClassFiles/TransformsTransitions/Demos/transforms.html in a code editor to view the code, and in a browser to view the result.

The page displays five <div>s, each labeled with a transform method and containing a small, darker <div>. When moused over, each of the small dark elements displays its respective transform method. The screenshot below shows at top the original state of each element; at bottom is the result of each upon application of its respective transform method:

2-D transform demo

In the first element, transform: translate(50px, 100px); pushes the small box 50 pixels right and 100 pixels down from its original position.

In the second element, transform: rotate(20deg); rotates the small box 20 degrees clockwise.

We use transform: scale(2.5, 3); to stretch the third box 2.5 times wider and three times taller.

In the fourth example, we skew the small box 10 degrees about the X-axis and 30 degrees about the Y-axis with transform: skew(10deg, 30deg);

We combine all of the transforms with transform: matrix(0.75,0.5,-0.5,1.5,20,0); in the final example.

By default, the origin - the reference point for translations, rotations, scalings, and skewings - is the center of the element. We can change that via the transform-origin property. The property accepts values for the x-axis and y-axis of the origin, respectively, in percentage, absolute length, or keyword forms. Here are some examples:

  • transform-origin: 20% 50%
  • transform-origin: left top (possible x values are left, center, right; possible y values are top, center, bottom)
  • transform-origin: 10px 50px

In our work so far, we have only looked at two-dimensional transforms. CSS3 also gives us the power to transform elements in three dimensions, too, but those transforms are beyond the scope of this course.

Transitions & Transforms

Duration: 15 to 25 minutes.

In this exercise, you will continue to work on Stories.html by applying transitions and transforms to various elements on the page.

  1. Open TransformsTransitions/Exercises/Stories.html.
  2. Add some transitions and transforms to the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with transitions and transforms.
  3. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

TransformsTransitions/Solutions/Stories.html
<html>
<head>
<title>Stories</title>
<style type="text/css">
	h1 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
		letter-spacing: .25em;
		word-spacing: .4em;
		margin-bottom: 20px;
		text-align: center;

		transform: rotate(3deg);
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		-o-transform: rotate(3deg);
	}
	
	p {
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
		line-height: 1.2;
		text-indent: 2em;
	}

	#links {
		width: 300px;
	}
	
	a {
		display: block;
		background-color: #eaf1dd;
		color: #060;
		text-decoration: none;
		font-family: Verdana, Geneva, sans-serif;
		padding: 6px 4px;
		margin: 4px;
		border-right: 2px solid #999999;
		border-bottom: 2px solid #999999;
		border-top-width: 0px;
		border-left-width: 0px;
	}

	a:hover {
		color: #030;
		border: 1px solid #9999ff;
	}

	a:active {
		color: #aca;
		border-left: 2px solid #030;
		border-top: 2px solid #030;
		border-right-width: 0px;
		border-bottom-width: 0px;
	}
	
	.topLink {
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
	
	.BackToTop {
		text-decoration: none;
		text-transform: capitalize;
		border-style: groove;
		border-color: #0000ff;
		border-bottom-width: 5px;
		border-left-width: 5px;
		border-top-width: 2px;
		border-right-width: 2px;
		padding: 4px;
	}
	
	div {
		padding-top: 2px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 2px;
		margin-bottom: 15px;

		-moz-transition:padding 2s;
		-webkit-transition:padding 2s;
		-o-transition:padding 2s;
		transition:padding 2s;
	}

	div:hover {
		padding-top: 27px;
		padding-left: 35px;
		padding-right: 35px;
		padding-bottom: 27px;
	}
	
	body {
		margin: 0px;
		border: 40px ridge #cc6666;
		padding: 15px;
		background-color: #ffff99;
	}
</style>
---- C O D E   O M I T T E D ----

We added a transition to the div element for each story, adding extra padding (over a two-second delay) when the user mouses over each story's text content.

We also added a rotate transform to each story's h2 title, rotating each title by three degrees.