Transitions

Contact Us or call 1-877-932-8228
Transitions

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 type="text/css">
		#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:

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:

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:

Next