HTML5 Zone is brought to you in partnership with:

Gil Fink, Microsoft MVP, is an expert in Web development and Microsoft data platform. He works as a senior architect at Sela Group. He is currently consulting for various enterprises and companies, where he architects and develops Web and RIA-based solutions. He conducts lectures and workshops for developers and enterprises who want to specialize in infrastructure and Web development. He is also a co-author of several Microsoft Official Courses and training kits. You can read his publications at his blog: http://blogs.microsoft.co.il/blogs/gilf. Gil is a DZone MVB and is not an employee of DZone and has posted 151 posts at DZone. You can read more from them at their website. View Full User Profile

CSS3 Transitions

12.19.2012
| 2420 views |
  • submit to reddit

CSS3 TransitionsIn the past I wrote about CSS3 transformations and animations. Another new option in CSS3 is transitions which will be discussed in this post.

Transitions

In the old web, if you changed a property in CSS the change was instantly updated by the browser. If you wanted the change to happen over a time duration, you needed to use JavaScript code (for example using setTimeout function) or third party library to do that. In CSS3 this situation changes. CSS3 introduced transitions, which enable CSS property changes to occur seamlessly over a given duration. You just need to use the transition properties and the browser will do the transition for you.

CSS3 Transitions Properties

CSS3 transitions include various of properties to configure the transition:

  • transition-property: the CSS property name that the transition is applied to. You can write more than one property as long as you separate the different properties with commas.
  • transition-duration: the duration of the transition in seconds. The default value for the duration is 0 and therefore without a duration the transition won’t occur.
  • transition-timing-function: the timing function that describe the speed of the duration and how it should be calculated by the browser. It can receive a various of timing functions like linear, ease-in, ease-out, cubic-bezier. The default value is ease.
  • transition-delay: defines when the transition starts. The default value is 0 meaning the transition will start immediately.
  • transition: a shorthand property that includes all the previous transition property configuration. Every property is separated by comma.

Here is an example of using a transition on an image with img id:

#img
{
   width: 100px;
   height: 100px;
   transition: width 2s linear 1s, height 2s ease-in 1s;
   -ms-transition:width 2s linear 1s, height 2s ease-in 1s;
   -moz-transition:width 2s linear 1s, height 2s ease-in 1s;
   -webkit-transition:width 2s linear 1s, height 2s ease-in 1s;
   -o-transition:width 2s linear 1s, height 2s ease-in 1s;
}
 
#img:hover
{
   width:200px;
   height: 200px;
}

The transition will occur when you hover over the image. It will change the image width and height using two different timing functions (linear and ease-in), with a delay of a second and a duration of two seconds. When you stop hovering the image will return to it’s previous state again using the same transition. Another point of interest in the code sample is the use of browser prefixes. Since the CSS3 transitions specification isn’t a recommendation yet the browser vendor use their own prefixes.

Combining Transitions with Other CSS3 Modules

One of the great result of all the new CSS3 modules is the ability to combine different CSS modules to create better User Experience (UX). For example, you can combine transitions with transformations to create fancy animations such as rotating a moving element. Here is a simple combination example:

#img
{
   transition: transform 2s;
   -ms-transition: -ms-transform 2s;
   -moz-transition:-moz-transform 2s;
   -webkit-transition: -webkit-transform 2s;
   -o-transition:-o-transform 2s;
   transform: rotate(360deg);
   -ms-transform: rotate(360deg);   
   -moz-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
}
 
#img:hover
{
   transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   -o-transform: rotate(0deg);
}   

This previous CSS will rotate the image with img id when you hover on it clockwise in two seconds duration.

CSS3 Transitions Support

Chrome from version 22.
Firefox from version 15.
From Internet Explorer 10.
Safari from version 5.1.
Opera from version 12.

Summary

CSS3 transitions help to change CSS properties over a specified duration with a timing function. Using it in applications can help to reduce the amount of scripts that you write in order to create simple animations. Let the browser do all the animation calculations for you.



Published at DZone with permission of Gil Fink, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)