CSS3 Transitions

CSS3 transitions effects that allows an element change gradually from one style to another.It requires simple properties like width,height and time(duration).


How does Css3 Transitions work?


Specify the required Css property add according the effect you want.Mention the duration of the effect you want.Properties of the Transition are like transition-duration, transition-timimg-function,transition-delay.


eg. of Transitions
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}