CSS transition

The CSS transition is used to change the property value of an element smoothly, in specified duration. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: chocolate;
         transition: 2s;}
      div:hover{width: 240px;}
   </style>
</head>
<body>
   
   <div></div>
   
</body>
</html>

Output

Hover or move the mouse cursor on the DIV (chocolate colored box) to see the transition.

Note - The transition can be defined to an element either using pseudo-classes like :hover or :active or using JavaScript.

Important - Be sure to define the duration for a transition, because the default value of transition-duration is 0.

The transition effect can be seen, when the specified property changes its value. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: chocolate;}

      div#transit{transition: 2s;}
      
      div#normal:hover{width: 240px; background-color: blueviolet;}
      div#transit:hover{width: 240px; background-color: blueviolet;}
   </style>
</head>
<body>
   
   <h2>Without transition Effect</h2>
   <div id="normal"></div>

   <h2>Using transition Effect</h2>
   <div id="transit"></div>
   
</body>
</html>

Output

Without transition Effect

Using transition Effect

Hover the mouse cursor on both DIVs (boxes) to see the change in property value, with and without using the transition effect. That is, the second DIV changes its defined property values, smoothly.

CSS transition Syntax

The syntax of transition in CSS, is:

transition: transition-property transition-duration transition-timing-function transition-delay;

The transition property can also be used as shorthand for following CSS properties:

transition-property - used to apply the transition only to specified property
transition-duration - used to define the time to complete the transition
transition-timing-function - used to define the way to process the transition during specified transition-duration
transition-delay - used to delay the transition

CSS transition Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 80px; height: 60px; background-color: crimson;
         color: white; text-align: center;}
      
      div.a{transition: 1.4s;}
      div.b{transition: 1.4s width;}
      div.c{transition: all 1.4s ease-in-out;}
      div.d{transition: all 1.4s ease-in-out 2s;}

      div:hover{width: 280px; background-color: blue;}
   </style>
</head>
<body>
   
   <h2>transition: 1.4s</h2>
   <div class="a"></div>

   <h2>transition: 1.4s width</h2>
   <div class="b"></div>

   <h2>transition: all 1.4s ease-in-out</h2>
   <div class="c"></div>

   <h2>transition: all 1.4s ease-in-out 2s</h2>
   <div class="d"></div>
   
</body>
</html>

Output

transition: 1.4s

transition: 1.4s width

transition: all 1.4s ease-in-out

transition: all 1.4s ease-in-out 2s

The transition plays an important role to create smooth increase/decrease of input field size on the web. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      input[type=text]{width: 80px; transition: 0.5s;}
      input[type=text]:focus{width: 240px;}
   </style>
</head>
<body>
   
   <input type="text"> <button>Search</button>
   
</body>
</html>

Output

Click in the input text field to see the transition. Now let's create one more example to complete the tutorial on transition:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 160px; height: 160px; background-color: chocolate;
         text-align: center; color: white; margin: 20px auto;
         transition: 2s ease-in-out;}
      
      div.a:hover{transform: skewX(45deg);}
      div.b:hover{transform: rotate(45deg) skewX(45deg); background-color: blueviolet;}
      div.c:hover{transform: rotate(0.5turn); background-color: purple;}
      div.d:hover{transform: rotate3d(3, 5, 2, 340deg); background-color: red;}
   </style>
</head>
<body>
   
   <div class="a">fresherearth</div>
   <div class="b">fresherearth</div>
   <div class="c">fresherearth</div>
   <div class="d">fresherearth</div>
   
</body>
</html>

Output

fresherearth

CSS Online Test

« Previous Tutorial Next Tutorial »