CSS3 Animation Properties Transition

Transition

• Internet Explorer 9 and earlier browsers do not support the transition property.
• Internet Explorer 10, Firefox, Opera, and Chrome support the transition properties.
• Safari supports an alternative-webkit-transition property.

The Transition property is a shorthand property for setting four transition properties:

value	Properties
Transition-property	Specifies the name of the CSS property that sets the transition effect
Transition-duration	Specify how many seconds or milliseconds to complete the transition effect
Transition-timing-function	The speed curve of the speed effect is mainly linear: the transition effect that starts at the same speed to the end; ease: transition effect that starts slowly, then gets faster, then ends slowly; ease-in: transition effect at a slow start; Ease-out: Specifies transition effect at slow end Ease-in-out: Specifies the transition effect that starts and ends at a slow speed; Cubic-bezier (0.42,0,0.58,1): Defines its own value, between 0 and 1;
Transition-delay	Define when the transition effect starts

can be abbreviated as: Transition:property duration timing-function delay;

For example:

<style>    .box{ width: 200px; height: 200px; background: #00f; transition: width 1s linear; }    .box:hover{ width: 800px; }</style><div class="box"></div>

CSS3 Animation Properties Transition