css3 Transition

css3  Transition:

• Without using JavaScript or Flash animations, CSS3 is the ability to apply animations to the instruct elements. IE9 still won’t support CSS transitions.
• CSS3 transitions are effects that let an element gradually change from one style to another.
• Let’s try for the simple effect. When you hover a link in a sidebar, the text will slide to the right ever slightly.

Note: If the duration is not specified, the transition will have no effect, because default value is 0.
 The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Syntax:1

 div
 {
 transition: width 2s;
 -moz-transition: width 2s; /* Firefox 4 */
 -webkit-transition: width 2s; /* Safari and Chrome */
 -o-transition: width 2s; /* Opera */
 }
 Specify :hover for <div> elements:
 div:hover
 {
 width:300px;
 }

 Example:

 ul a { 
 -webkit-transition: padding .5s; 
 -moz-transition: padding .5s; 
 -o-transition: padding .5s; 
 transition: padding .5s; 
 }
 a: hover { padding-left: 6px; }  

HTML:

 <ul>
 <li> <a href="#"> One Over Me </a></li>
 <li> <a href="#"> Two Over Me </a> </li>
 <li> <a href="#"> Three Over Me </a> </li>
 <li> <a href="#"> Four Over Me </a> </li>
 <li> <a href="#"> Five Over Me </a> </li>
 </ul>

Note: We don’t directly apply the transition to the hover state of the anchor tag,  because, if we did, the animation would only take effect during mouseover. On mouseout, the element would immediately return to its intial state.

•  Transition will accept three parameters:
• The property to transition. (Set this value to all if needed)
• The duration
• The easing type

Browser Support:

 Internet Explorer does not yet support the transition property.
 Firefox 4 requires the prefix -moz-.
 Chrome and Safari requires the prefix -webkit-.
 Opera requires the prefix -o-.