CSS Transitions: A Best Practice

Related article

Requirements: This demo uses CSS3 2D Transitions, the Selectors API and classList (also known as DOMTokenList). If it doesn't work in your browser, that's probably why. You should upgrade or switch. The latest versions of Opera, Chrome, Safari, and Firefox support these features.

What to do: Click on the rectangles below to trigger the transitions. To date, in most browsers — Firefox is the exception — the top box will jump from point to point while the one below will slide.

Best practice: Use the same unit when using lengths in CSS3 transitions, or transition from a zero start value. If you are transitioning from a 0 value, the unit does not matter.

This div tries to transition between two different units — pixels and percentage (left: 1px to left: 80%). Notice that it doesn't transition in most browsers. It jumps.
This div does transitions the right way. It transitions between two values of the same unit (left: 1px to left: 600px). Notice how smooth it is.