CSS3 TRANSITIONS

CSS3 Transitions enable an element gradually change from one style to another

You must specify style change must occur and the duration of the transition.

For example, if we want the transition lasts 3 seconds

div { transition: width 3s; /* Firefox 4 */ -moz-transition: width 3s; /* Safari and Chrome */ -webkit-transition: width 3s; /* Opera */ -o-transition: width 3s; }

If we want to increase the width of an element and the change lasts 3 seconds

CSS3

div { width:120px; height:120px; background:green; transition:width 3s; /* Firefox 4 */ -moz-transition:width 3s; /* Safari, Chrome */ -webkit-transition:width 3s; /* Opera */ -o-transition:width 3s; } div:hover { width:350px; }

We use hover to enable the transition when you hover over the item

HTML

<div>Transition</div>

Example HTML page with a blue rectangle hovering overhead, rotates 360 degrees for 3 seconds to increase its width and height gradually

<html> <head> <style> div { background:blue; width:80px; height:80px; transition:width 3s, height 3s; -moz-transition:width 3s, height 3s, -moz-transform 3s; -webkit-transition:width 3s, height 3s, -webkit-transform 3s; -o-transition:width 3s, height 3s, -o-transform 3s; } div:hover { width:250px; height:250px; transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); } </style> </head> <body> <div>Transition</div> </body> </html>