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:
- 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 >Beginner For Beginner</ 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 >Beginner For Beginner</ 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 >Beginner For Beginner</ 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 >Beginner For Beginner</ 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 >Beginner For Beginner</ 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
Contact Us