In the past, the W3C debated whether page transitions belong in our CSS stylesheets, under the domain of web designers, or in our code, under the domain of web developers. After much lobbying by both designers and developers, they created a working draft for transitions. Once this specification is officially adopted, CSS3 Transitions will become a standard tool in web browsers. Until that time, we had to rely on vendor prefixes for this feature.
NOTE: IE9 does not support the CSS3 Transitions style.
CSS3 Transitions provide the look of animation by changing CSS values smoothly over a specific duration of time. Without the transitions, style changes happen instantly. They are intended to generate a professional visual experience for the user. In addition, when transitions are part of CSS, their processing is handled by the GPU which is beneficial to devices with limited computing power like iPads and Android phones. Also, even though transitions can be handled by developers using jQuery or JavaScript or a myriad of other languages, including them in the “design” of the website is a best practice.
Try it Out!
Create a new HTML page and put this in the <head> section:
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
transition-duration: 2s;
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-duration: 2s; /* Opera */
transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-o-transition-timing-function: linear; /* Opera */
transition-delay: .5s;
-moz-transition-delay: .5s; /* Firefox 4 */
-webkit-transition-delay: .5s; /* Safari and Chrome */
-o-transition-delay: .5s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
Next, add a <div> element to the <body> of your page like this:
<div></div>
Now open the page in a browser other than IE9 and hover over the square. See how the square smoothly widens? Next try it in IE9 or an older browser. See how the change is immediate? Your website visitors will notice too!
How it Works
The key to injecting dynamic style on your web pages, using CSS3 transitions, is the properties of the transition style.
The transition-property identifies the CSS style or property in which to apply the transition.
transition-property: none|all|property;
In the syntax, ‘property’ is any animatable CSS property. In the example above ‘width’ is used as the property to be transitioned.
The transition-duration defines the length of time the transition takes place.
transition-duration: time;
In the syntax, ‘time’ is measured in seconds or milliseconds. A value of 0 means no effect will take place. In the example, the duration takes place over five seconds.
The transition-delay defines the length of time before the transition begins.
transition-delay: time;
In the syntax, ‘time’ is measured in seconds or milliseconds. A value of 0 means no effect will take place. In the example, the transition doesn’t start for half a second.
The transition-timing-function allows the transition to speed up or slow down over the transition-duration, using a cubic bezier curve.
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
In the syntax, you can either choose one of the pre-defined curves: linear, ease, etc. or you create your own curve, using the cubic-bezier() function and inputing you own values. These values must be between 0 and 1. Try it out with the below markup.
Create a new html web page and copy this in:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.square1
{
width:100px;
height:100px;
background:red;
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
transition-duration: 4s;
-moz-transition-duration: 4s; /* Firefox 4 */
-webkit-transition-duration: 4s; /* Safari and Chrome */
-o-transition-duration: 4s; /* Opera */
transition-timing-function: cubic-bezier(0,0,1,1);
-moz-transition-timing-function: cubic-bezier(0,0,1,1); /* Firefox 4 */
-webkit-transition-timing-function: cubic-bezier(0,0,1,1); /* Safari and Chrome */
-o-transition-timing-function: cubic-bezier(0,0,1,1); /* Opera */
}
.square1:hover
{
width:300px;
}
.square2
{
width:100px;
height:100px;
background:blue;
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
transition-duration: 4s;
-moz-transition-duration: 4s; /* Firefox 4 */
-webkit-transition-duration: 4s; /* Safari and Chrome */
-o-transition-duration: 4s; /* Opera */
transition-timing-function: cubic-bezier(0.42,0,0.58,1);
-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1); /* Firefox 4 */
-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1); /* Safari and Chrome */
-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1); /* Opera */
}
.square2:hover
{
width:300px;
}
</style>
</head>
<body>
<div id="div1" class="square1"></div>
<br/>
<div id="div2" class="square2"></div>
</body>
</html>
Now open the page in a CSS3 transitions compatible browser to see the effects. Change the values and rerun.
Try the same, using the predefined curves:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.square1
{
width:100px;
height:100px;
background:red;
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
transition-duration: 4s;
-moz-transition-duration: 4s; /* Firefox 4 */
-webkit-transition-duration: 4s; /* Safari and Chrome */
-o-transition-duration: 4s; /* Opera */
transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-o-transition-timing-function: linear; /* Opera */
}
.square1:hover
{
width:300px;
}
.square2
{
width:100px;
height:100px;
background:blue;
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
transition-duration: 4s;
-moz-transition-duration: 4s; /* Firefox 4 */
-webkit-transition-duration: 4s; /* Safari and Chrome */
-o-transition-duration: 4s; /* Opera */
transition-timing-function: ease;
-moz-transition-timing-function: ease; /* Firefox 4 */
-webkit-transition-timing-function: ease; /* Safari and Chrome */
-o-transition-timing-function: ease; /* Opera */
}
.square2:hover
{
width:300px;
}
</style>
</head>
<body>
<div id="div1" class="square1"></div>
<br/>
<div id="div2" class="square2"></div>
</body>
</html>
Below is a table of CSS styles animatable by transitions.
ANIMATABLE CSS STYLES:
Property Name | Type |
background-color | color |
background-image | only gradients |
background-position | percentage, length |
border-bottom-color | color |
border-bottom-width | length |
border-color | color |
border-left-color | color |
border-left-width | length |
border-right-color | color |
border-right-width | length |
border-spacing | length |
border-top-color | color |
border-top-width | length |
border-width | length |
bottom | length, percentage |
color | color |
crop | rectangle |
font-size | length, percentage |
font-weight | number |
grid-* | various |
height | length, percentage |
left | length, percentage |
letter-spacing | length |
line-height | number, length, percentage |
margin-bottom | length |
margin-left | length |
margin-right | length |
margin-top | length |
max-height | length, percentage |
max-width | length, percentage |
min-height | length, percentage |
min-width | length, percentage |
opacity | number |
outline-color | color |
outline-offset | integer |
outline-width | length |
padding-bottom | length |
padding-left | length |
padding-right | length |
padding-top | length |
right | length, percentage |
text-indent | length, percentage |
text-shadow | shadow |
top | length, percentage |
vertical-align | keywords, length, percentage |
visibility | visibility |
width | length, percentage |
word-spacing | length, percentage |
z-index | integer |
zoom | number |
Happy Coding!
See this tutorial in action here: http://www.developerdrive.com/demo/Smooth_Transitions_CSS3/demo.html