transition property
The transition property is a shorthand
for smooth transitions, it allows you to
simultaneously set
transition-duration,
transition-property,
transition-timing-function
and
transition-delay.
Syntax
selector {
transition: value;
}
The order of the properties does not matter,
but the duration (transition-duration)
must come before the delay
(transition-delay).
Values
See the corresponding properties. Default
value: all 0s ease 0s.
The none value cancels all
transitions (they will happen instantly).
Example
Hover the mouse over the block - nothing
will happen for 3 seconds (there is
a 3s delay), and then it will smoothly
change its width in 2 seconds. If
you then remove the mouse - then again
nothing will happen for 3 seconds,
and then the width will smoothly decrease
to the original value:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
See also
-
the
animationproperty
that can be used to create animation