/    /  CSS Transition

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 Transition

 

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:

 

CSS Transition