CSS Transitions: A Best Practice
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.
divtries to transition between two different units — pixels and percentage (
left: 80%). Notice that it doesn't transition in most browsers. It jumps.
divdoes transitions the right way. It transitions between two values of the same unit (
left: 600px). Notice how smooth it is.