CSS Transition

This CSS property is effects that are added to change the element gradually from one style to another, without using flash or JavaScript.

How to Use CSS Transitions:

This property on which you want to add an effect.
The time duration of the effect.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style>  
div { 
  width: 100px; 
  height: 100px; 
  background: orange; 
  -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ 
  transition: width 1s;  
} 
div:hover { 
  width: 300px; 
} 
</style> 
</head> 
<body> 
<div></div> 
<h3>Move the cursor over the div element above, to see the transition effect.</h3> 
</body> 
</html>

OUTPUT:

CSS Multiple Transition Effect:

Add a transition effect on more than one property, separate those properties with a comma(,).

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style>  
div { 
  padding:15px;
  width: 150px; 
  height: 100px; 
  background: red;
color:white;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ 
  transition: width 2s, height 2s, transform 2s; 
} 

div:hover { 
  width: 300px; 
  height: 200px; 
  -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ 
  transform: rotate(360deg); 
} 
</style> 
</head> 
<body> 
<div><b>I2Tutorials</b><p> (Move your cursor on me to see the effect)</p></div> 
</body> 
</html>

OUTPUT: