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.


Property :

transition-property: none|all|property|initial|inherit;
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.


transition-property: width, height;


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.

.demodiv:hover {
width: 300px;
width: 100px;
height: 100px;
background: indigo;
transition-property: width;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
<div class='demodiv'>


Ask Questions

Ask Question