CSS3 Transitions Tutorial

Cascading style sheets are mostly used to apply static style to elements on a page. With CSS3 you can create many dynamic effects that would have once required some kind of script.

The transition property allows you to animate an element by letting you change the element’s property, like color or size dynamically, based on user behavior. There are five transition functions, the transition-property function, the transition-duration function, the transition-timing-function function, the transition-delay function and the transition shorthand property.

 

Transition-Property

The transition-property allows you to designate which property of the element you would like to change. For example you can change the width or color of an element. You can specify more than one property to transition.

 

Transition-Duration

The transition-duration lets you set the total duration of the transition in seconds or milliseconds.

 

Transition-Timing-Function

The transition-timing-function lets you control the rhythm of the transition. It has six values. They are, linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier.

 

Value	Description
linear	Specifies a transition effect with the same speed from start to end
ease	Specifies a transition effect with a slow start, then fast, then end slowly
ease-in	Specifies a transition effect with a slow
ease-out	Specifies a transition effect with a slow end
ease-in-out	Specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

 

Transition-Delay

The transition-delay function lets you specify a time delay before the transition starts in seconds or milliseconds.

 

Let us look at an example that combines all these functions. In this example the transition is only triggered when the user hovers over the element. The element will return to its original width then the cursor is no longer over the element.

#box1
{
width:200px;
height:150px;
background:#FFFCA1;
border:3px solid red;

/*Transition*/
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;

/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:2s;
-moz-transition-timing-function:linear;
-moz-transition-delay:1s;

/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;

/* Opera */
-o-transition-property:width;
-o-transition-duration:2s;
-o-transition-timing-function:linear;
-o-transition-delay:1s;
}

#box1:hover
{
width:500px;
}

(Note: This is just an image not a working example)

Here is what it Iooks like when you hover over it.

 

Transition

The transition shorthand property allows you to combine all the different transition functions in one property.

We can rewrite our earlier example as follows.

#box1
{
width:200px;
height:150px;
background:#FFFCA1;
border:3px solid red;
transition: width 2s linear 1s;
-moz-transition:width 2s linear 1s; /* Firefox */
-webkit-transition:width 2s linear 1s; /* Safari and Chrome */
-o-transition-transition:width 2s linear 1s; /* Opera */
}

#box1:hover
{
width:500px;
}