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.
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.
The transition-duration lets you set the total duration of the transition in seconds or milliseconds.
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.
|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|
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.
border:3px solid red;
/* Firefox 4 */
/* Safari and Chrome */
/* Opera */
(Note: This is just an image not a working example)
Here is what it Iooks like when you hover over it.
The transition shorthand property allows you to combine all the different transition functions in one property.
We can rewrite our earlier example as follows.
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 */