CSS3 Transitions

November 28, 2012

tags: , ,
no comments

CSS3 Transitions

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.


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:

   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;
   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:

   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);
   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.


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.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>