Jobs Hub

Menu

CSS transition-property

The CSS transition-property is used to apply the transition only on specified property. For example:

HTML with CSS Code

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

Output

Hover the mouse cursor over the box to see the transition effect.

In above example, since the specified property is width, therefore the transition effect only occurs on width, and there is no transition effect can be seen for the background-color property. That is, the background color gets changed instantly when user hovers the mouse cursor over DIV (chocolate colored box), whereas the change in width goes smoothly.

Note - Transition allows the smooth change of specified property's value.

CSS transition-property Syntax

The syntax of transition-property in CSS, is:

transition-property: x;

The value of x should be any of the following:

all - used to define transition to all properties. This is the default value
property - used to define transition only to particular property(s). Multiple properties can be inculded, where each property must be separated by comma
none - used to define no transition at all
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS transition-property: all; Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: maroon;
         transition-property: all; transition-duration: 1.4s;}
      div:hover{width: 220px; background-color: blue; border-radius: 50%;}
   </style>
</head>
<body>
   
   <div></div>
   
</body>
</html>

Output

When you put your mouse cursor over the Box, then the change in width, background-color, and border-radius goes smoothly.

CSS transition-property: property; Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: maroon;
         transition-property: border-radius; transition-duration: 1.4s;}
      div:hover{width: 220px; background-color: blue; border-radius: 50%;}
   </style>
</head>
<body>
   
   <div></div>
   
</body>
</html>

Output

In above example, only the border-radius changes smoothly. Other properties changes its value instantly.

CSS transition-property Example

HTML with CSS Code

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

      div.a{transition-duration: 1.4s;}
      div.a:hover{border-radius: 50%; background-color: blue;}
      
      div.b{transition-property: transform; transition-duration: 2s;}
      div.b:hover{transform: skewY(20deg); background-color: blue;}
      
      div.c{transition-property: transform, background-color; transition-duration: 1.8s;}
      div.c:hover{transform: skewY(20deg); background-color: blue;}

      div.d{transition-property: transform;transition-duration: 2s;}
      div.d:hover{transform: perspective(400px) scaleZ(2) rotateY(-45deg);
         background-color: blue; width: 260px;}

      div.e{transition-property: all; transition-duration: 2s;}
      div.e:hover{transform: perspective(400px) scaleZ(2) rotateY(-45deg);
         background-color: blue; width: 260px;}
   </style>
</head>
<body>
   
   <h2>Without transition-property</h2>
   <div class="a"></div>
   
   <h2>transition-property: transform</h2>
   <div class="b"></div>

   <h2>transition-property: transform, background-color</h2>
   <div class="c"></div>

   <h2>transition-property: transform</h2>
   <div class="d"></div>

   <h2>transition-property: all</h2>
   <div class="e"></div>
   
</body>
</html>

Output

Without transition-property

transition-property: transform

transition-property: transform, background-color

transition-property: transform

transition-property: all

CSS Online Test

« Previous Tutorial Next Tutorial »