transition-property property
The transition-property property sets
a property that will be animated by a smooth
transition. The value should be the
name of the CSS property that will be animated. If
you set the value to all (it is set by
default), all properties will be animated
at once.
Syntax
selector {
transition-property: value;
}
Example
Hover the mouse over the block - it will
smoothly change its width, since
transition-property has the
width value:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Example . The all value
In this example, transition-property has
the all value - therefore, all properties
written for the hover state will smoothly
change (in our case, these are width and
height). All changes will occur in one time,
which is specified in
transition-duration:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: all;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
:
See also
-
the
transition-durationproperty
that sets a duration of a smooth transition -
the
transition-delayproperty
that sets a delay before a smooth transition -
the
transition-timing-functionproperty
that specifies a timing function for a smooth transition -
the
transitionproperty
that is a shorthand for a smooth transition -
the
animationproperty
that can be used to create animation