HTML and CSS Reference
In-Depth Information
In this case, all four of the transition properties will be transitioned over a
duration of 3 seconds, because that is the only value specified in the
transition-
duration
property. Then for
transition-timing-function
, the first property is
given
ease-in
, the second is given
ease
, and the third is given
linear
. But there
is one more property. To give this a timing function, you cycle back to the start of
the
transition-timing-function
list: the fourth property is therefore given the
ease-in
timing function.
Yo u c a n s p e c i f y t h a t y o u w a n t a l l p r o p e r t i e s t h a t c h a n g e u p o n s t a t e c h a n g e t o
transition by just writing
transition-property: all
;
NOTE:
To b e h To n e s t , I v e r y r a r e l y h a v e t To w r i t e s u c h c To m p l i c a t e d
transitions. I usually just write something like
transition: 1s all;
(the duration often varies).