HTML5: Your visual blueprint™ for designing rich web pages and applications

TRANSITION BETWEEN STYLES

Transitions are a very easy way to create simple object-morphing animations as it changes from one style into another, using nothing but CSS. To do this, you must define a CSS rule with transition and an initial property value:

selector {
   transition: property, duration, timing,
 delay;
   property: value1;
 }

Then, for mouse-based transitions, use :hover on the second CSS rule and set the ending property value: selector:hover {property: value2; }.

The transition property’s first value states the actual CSS property to be transitioned and its starting property value. duration is the number of seconds that should be spent during the transition effect on that property. At a minimum, you need only these first two values to ...