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:
1. 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.
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:
2. 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:
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:
3. 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.
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:
4. 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.
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:
5. 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.
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
- Internet Explorer 10.0
- Firefox 16.0
- Opera 12.1
- Safari 9.0
Please Login to comment...