Home >>CSS Tutorial >CSS Transition

CSS Transition

CSS Transition

The CSS transition allows you to change the way in which the transition takes place between the two states of the element over a given duration without using JavaScript or flash.

Transition are like a grease in the wheel of CSS transition. By using the CSS transition you have a full control to change the property values smoothly. Let’s understand an example of CSS transition, when an hovering your mouse over a div, you can change the background color of the element with the help of pseudo-class and CSS Selector. We can use the transitions to animate the changes.

You have a two things to create CSS transition.

  • On which CSS property you want to add effects.
  • Time duration of the effect

Let's take an Example of CSS transition:

<!DOCTYPE html>
<html>
<head>
<style> 
div.trans {
  width: 100px;
  height: 100px;
  background: #54aae3;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
div.trans:hover {
  width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element, to see the transition effect:</p>
<div class="trans"></div>
</body>
</html>
Output:

The transition Property

Hover over the div element, to see the transition effect:

 

CSS Transition Properties

These are the following CSS transition properties:

Property Description
Transition It has a shorthand property for setting the four transition properties into a single code.
Transition-property It defines the name of the CSS property the transition effect takes place.
Transition-timing-function It is used to define the speed curve of the transition effect.
Transition-delay It can defines the delay for the transition effect.
Transition-duration It defines that in how many a transition effect can takes to complete.

Let's take another example of transition rotate:

<!DOCTYPE html>  
<html>  
<head>  
<style>   
div {  
    padding:15px;
    width: 150px;  
    height: 100px;  
    background: #f2a011;  
    -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: 250px;  
    height: 150px;  
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  
    transform: rotate(360deg);  
}  
</style>  
</head>  
<body>  
<div><b>Phptpoint.com</b><p>Move your cursor on me..</p></div>  
</body>  
</html>  
Output:
Phptpoint.com

Move your cursor on me..