CSS | transition-property Property - GeeksforGeeks

09 Aug, 2019
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.Syntax:transition-property: none;
Example: In the below example, we have specified that none of the property will get a transition effect. Hence if we hover of 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:
Syntax:
transition-property: none;

Example: In the below example, we have specified that none of the property will get a transition effect. Hence if we hover of 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:
all: All the CSS properties will get a transition effect. This is also the default value for this property.Syntax:transition-property: all;
Example: Instead of specifying the names of all the properties for which we need transition effect, we can also use the all value for the transition-property. This will allow us to display transition effect for all the properties without specifying their names individually which can be shown by 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:
Syntax:
transition-property: all;

Example: Instead of specifying the names of all the properties for which we need transition effect, we can also use the all value for the transition-property. This will allow us to display transition effect for all the properties without specifying their names individually which can be shown by 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:
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.Syntax:transition-property: property;
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:
Syntax:
transition-property: property;

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:
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.Syntax:transition-property: initial;
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, 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:
Syntax:
transition-property: initial;

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, 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:
inherit: Used to specify that this property will inherit its value from its parent element.Syntax:transition-property: inherit;
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 not specified the value for its parent. Hence, 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:
Syntax:
transition-property: inherit;

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 not specified the value for its parent. Hence, 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:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
Picked
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?