programplug Logo




CSS Transition

The CSS transition property allows us to change the element slowly form one style to the another over a specified duration.

How to Use CSS Transitions?
To generate a transition effect,we must specify two things:
  • To know about the duration of the effect.

  • what the css property you want to create for effect.

Remember:If the duration part is not declared or specified, the transition will have none effect on it,because of the default value is 0.
Example:
div
{
 width: 150px;
 height: 150px;
 background: blue;
-webkit-transition: width 4s; /* Safari */
transition: width 4s;
}
				 

Now, let us create a new value for the width property when a user moves its cursor over<div>it.

<!DOCTYPE html> 
 <html> 
<head>  
<style>  
div 
{
width: 150px;
height: 150px;
background: blue;
-webkit-transition: width 2s; 
transition: width 2s;
}

div:hover
{
width: 400px;
}
</style>  
</head>   
<body> 
<h1>Transition Property </h1>

<p>Hover over me to See the transition effect:</p>

Note:Internet Explorer 9 doesn't support this property and previous versions.

</body> </html>

CSS Multiple Transition Effect
The transition effect allows us to add more than one css property on it and if you want to create more than one property separtate it with the comma.
Let's take an example to clear the multiple tranistion effects below:

<!DOCTYPE html> 
<html> 
  <head>  
  <style>  
div {  
padding:20px;
width: 200px;  
height: 150px;  
background: violet;  
-webkit-transition: width 4s, height 4s, -webkit-transform 4s; 
/* For Safari 3.1 to 6.0 */  
transition: width 4s, height 4s, transform 24s;  
}  
div:hover {  
width: 250px;  
height: 150px;  
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  
transform: rotate(360deg);  
}  
</style>  
</head>   
<body> 
<div><b>programplug.com</b>

Move your cursor to see the effect of transition

</div> </body> </html>





Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy