CSS3 Transitions which describe how CSS properties can be made to change smoothly from one value to another over a given duration. The property values for transitions Transitions have four values to declare at maximum:

Shorthand:

-webkit-transition: property_name duration timing_function delay;

-moz-transition: property_name duration timing_function delay;

-o-transition: property_name duration timing_function delay;

transition: property_name duration timing_function delay;

(Target) Property:

-webkit-transition-property: property_name;

-moz-transition-property: property_name;

-o-transition-property: property_name;

transition-property: property_name;

Duration:

-webkit-transition-duration: duration; 

-moz-transition-duration: duration; 

-o-transition-duration: duration; 

transition-duration: duration;

Timing (of motion):

-webkit-transition-timing-function: timing_function; 

-moz-transition-timing-function: timing_function; 

-o-transition-timing-function: timing_function; 

transition-timing-function: timing_function;

Available timing functions:

ease – equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).

linear – equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).

ease-in – equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).

ease-out – equivalent to cubic-bezier(0, 0, 0.58, 1.0).

ease-in-out – equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).

Delay:

-webkit-transition-delay: delay; 

-moz-transition-delay: delay; 

-o-transition-delay: delay; 

-transition-delay: delay; 

Delay (like duration) can be entered either in seconds (eg. 0.7s) or in milliseconds (eg. 700ms).

In general, it’s good to declare transitions on default state selectors without pseudo classes. This will cause transition played in both direction, eg. when hovering.

Remember, you have to enter all the properties four times before being cross-browser compliant. Therefore it’d be best to use shorthand codes for keeping your CSS code clean.

Tags: CSS3 Transitions Property, Transform Rotate, Transform timming Function, Transition-Duration

This entry was posted on Thursday, May 27th, 2010 at 2:35 am and is filed under Css Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.