Open In App

CSS transition-property Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • none: This value is used to specify that no property will get a transition effect. 
  • all: All the CSS properties will get a transition effect. This is also the default value for this property.
  •  property: We can specify the names of CSS properties for which transition effect will be applied. We can also specify multiple properties by separating them with a comma. 
  • initial: Used to set this property to its default value. This value is useful when we don’t know the default value for a specific property. 
  •  inherit: Used to specify that this property will inherit its value from its parent element. 

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. 

html




<!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: 

html




<!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. 

html




<!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. 

html




<!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. 

html




<!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:

  • Google Chrome 26.0
  • Edge 12.0
  • Firefox 16.0
  • Opera 12.1
  • Safari 9.0


Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads