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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Aug, 2023
Like Article
Save Article