How to Make Smooth Transitions with CSS3

May 8, 2012
CSS
151 Shares
By

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

Author: Kim S. Teeple
Kim S Teeple graduated with a Communications Degree from Ohio State University, but found she had an aptitude for computers soon after college. She joined The Limited's IT department as a helpdesk analyst in 1995 and quickly moved into web development. In 1998, she moved back to her home town of Crestline, Ohio to join Pittsburgh Glass Works as a Systems Analyst. She has also done some free lance web development work for various companies.
  • http://twitter.com/MarkusThielSv Markus Thiel

    the 3WC?

    • Kim Teeple

      W3C stands for World Wide Web Consortium.

      • Guest

        Yepp.. I was only pointing out a typo ;)

  • designcouch

    Pretty basic stuff here – You do a thorough job, but this is fairly standard by now, no?

  • http://people.opera.com/danield Daniel Davis

    Very thorough and good that you included vendor prefixes. Just one thing…
    You should put non-prefixed properties after prefixed properties. As you probably know, later properties take precedence over earlier ones so stable (non-prefixed) properties should have precedence over experimental (prefixed) ones.

  • San

    Your information on CSS3 is awesome, thanks for great information :)

  • Chris

    Although it should work according to spec, css3 gradients (background-image) animation doesn’t work in any browser as far as i know. Just tried it in FF and Chrome, doesn’t work.

  • email to fax

    thank you so much

  • loeviabcoolo27

    v6hQ – Lately I used to be really, really low on cash and debits were eating me from all sides!! That was Until I found out how to earn money on the Internet. I visited surveymoneymaker period net, and started doing surveys for straight cash, and doing so I’ve been great amounts more able to do my things!! I am glad, that i did this! With all the financial stress these years, I really hope all of you will give it a chance. 2gI