CSS - transition-property Property
CSS transition-property property specifies which CSS properties should have a transition effect applied.
Note: If transition-duration property is set to 0, and the transition will have no effect.
Possible Values
none − No transitions will occur for any properties.
all − Every property that can transition will.
<custom-ident> − A string indicating which property should have a transition effect when its value changes.
Applies to
All elements, ::before and ::after pseudo-elements.
When using a shorthand property (e.g., background), all of its longhand sub-properties that support animation will be animated.
Syntax
Keyword Values
transition-property: none; transition-property: all;
<custom-ident> Values
transition-property: data_05; transition-property: -data; transition-property: data-column;
Multiple values
transition-property: data4, animation5; transition-property: all, height, color; transition-property: all, -moz-specific, sliding;
CSS transition-property - none Value
The following example demonstrates with transition-property: none no transition effect will be applied to any of the properties −
<html> <head> <style> .box { width: 100px; padding: 10px; transition-property: none; transition-duration: 3s; background-color: pink; } .box:hover, .box:focus { margin-left: 80px; background-color: lightgrey; } </style> </head> <body> <div class="box">Hover over me</div> </body> </html>
CSS transition-property - all Value
The following example demonstrates, with transition-property: all, the transition effect is applied to all the properties that can be animated −
<html> <head> <style> .box { width: 100px; padding: 5px; transition-property: all; transition-duration: 3s; background-color: lightgray; } .box:hover, .box:focus { margin-left: 80px; background-color: pink; padding: 15px; border: 4px solid blue; } </style> </head> <body> <div class="box">Hover over me</div> </body> </html>
CSS transition-property - <custom-ident> Value
he following example demonstrates the use of CSS custom property (--pink-color) to define a pink color on the background-color property. When you hover over or focus on the box, the background-color of the element changes as per the value of the custom property −
<html> <head> <style> html { --pink-color: pink; } .box { width: 100px; padding: 10px; transition-property: background-color; transition-duration: 4s; background-color: lightgray; } .box:hover, .box:focus { background-color: var(--pink-color); } </style> </head> <body> <div class="box">Hover over me</div> </body> </html>
CSS transition-property - Using Property Value
The following example demonstrates that when transition-property is set to padding, and as you hover over or focus on the box, the padding value changes to 15px −
<html> <head> <style> .box { width: 100px; transition-property: padding; transition-duration: 3s; background-color: lightgray; } .box:hover, .box:focus { padding: 15px; } </style> </head> <body> <div class="box">Hover over me</div> </body> </html>
To Continue Learning Please Login
Login with Google