CSS3 Transition Property
Here is the brief explanation on how to specify the name of the CSS property for the transition effect using the CSS3 Transition-Property property.
Explanation
Property :
transition-property: none|all|property|initial|inherit; Where,none - No property will get a transition effect all - Default value. All properties will get a transition effect property - Defines a comma separated list of CSS property names the transition effect is for initial - Sets this property to its default value. inherit - Inherits this property from its parent element.
Usage:
transition-property: width, height;
Definition:
The transition-property specifies the name of the CSS property the transition effect is for. A transition effect could typically occur when a user hover over an element. Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
Example:
<style>
.demodiv:hover {
width: 300px;
}
.demodiv{
width: 100px;
height: 100px;
background: indigo;
transition-property: width;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
}
</style>
<div class='demodiv'>
</div>
.demodiv:hover {
width: 300px;
}
.demodiv{
width: 100px;
height: 100px;
background: indigo;
transition-property: width;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
}
</style>
<div class='demodiv'>
</div>
Result:
