Open In App

CSS transition-property Property

The transition effect is used to display the change in the property of an element over a specified duration. The transition-property property is used to specify the name of the CSS property for which the transition effect will occur. 

Syntax:



transition-property: none | all | property | initial | inherit;

Property values:

Example: In the below example, we have specified that none of the properties will get a transition effect. Hence if we hover over the box, the changes in its properties will be sudden rather than transitioning from one value to another over a specified duration. 






<!DOCTYPE html>
<html>
   
<head>
    <title>CSS transition-property property</title>
    <style>
        .box {
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: none;
            transition-duration: 2s;
        }
 
        .box:hover {
            background-color: pink;
            width: 200px;
            height: 150px;
        }
 
        h1,
        h2 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeks For Geeks</h1>
    <h2>transition-property: none</h2>
    <div class="box"></div>
</body>
   
</html>

Output:  valuesExample: Instead of specifying the names of all the properties for which we need the transition effect, we can also use all values for the transition-property. This will allow us to display the transition effect for all the properties without specifying their names individually which can be shown in the below example: 




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS transition-property property</title>
    <style>
        .box {
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: all;
            transition-duration: 2s;
        }
 
        .box:hover {
            background-color: pink;
            width: 200px;
            height: 150px;
        }
 
        h1,
        h2 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeks For Geeks</h1>
    <h2>transition-property: all</h2>
    <div class="box"></div>
</body>
   
</html>

Output: 

Example: We have specified multiple properties in the below example for transition effect (i.e background-color, width and height) by separating them with a comma. Hence when we hover over the box, we can see the transitions in the properties of the box. 




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS transition-property property</title>
    <style>
        .box {
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: background-color, width, height;
            transition-duration: 2s;
        }
 
        .box:hover {
            background-color: pink;
            width: 200px;
            height: 150px;
        }
 
        h1,
        h2 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeks For Geeks</h1>
    <h2>
        transition-property:
        background-color, width, height</h2>
    <div class="box"></div>
</body>
   
</html>

Output: 

Example: As we have specified the property value as initial in the below example, the default value for this property (which is all) will be assigned to transition property. Hence, a transition effect will occur for all the CSS properties which change as we hover over the box. 




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS transition-property property</title>
    <style>
        .box {
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: initial;
            transition-duration: 2s;
        }
 
        .box:hover {
            background-color: pink;
            width: 200px;
            height: 150px;
        }
 
        h1,
        h2 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeks For Geeks</h1>
    <h2>transition-property: initial</h2>
    <div class="box"></div>
</body>
   
</html>

Output: 

Example: As we have specified the property value as inherit in the below example, the box will inherit the transition-property value of its property. But in this case, the transition-property value of its parent will be all (as it is the default value) as we haven’t specified the value for its parent. Hence, a transition effect will occur for all the CSS properties. 




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS transition-property property</title>
    <style>
        .box {
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: inherit;
            transition-duration: 2s;
        }
 
        .box:hover {
            background-color: pink;
            width: 200px;
            height: 150px;
        }
 
        h1,
        h2 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeks For Geeks</h1>
    <h2>transition-property: inherit</h2>
    <div class="box"></div>
</body>
   
</html>

Output: 

Supported browsers: The browsers supported by transition-property Property are listed below:


Article Tags :