Over a million developers have joined DZone.

CSS3 Transitions

· Web Dev Zone

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

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.



Make the transition to Node.js if you are Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}