HTML and CSS Reference
In-Depth Information
Transition timing functions
By default, transitions happen at a constant rate, but you can adjust
that with the
transition-timing-function
property. The default value is
linear
, but several other keywords are available:
ease-in-out
,
ease-in
,
ease-out
, and
ease
. The difference is much easier to see than it is to
explain, so the next four screenshots show the values in operation side
by side over a 20-second transition.
The quickest out of the blocks is
ease-out
, followed by
ease
. Both
ease-
in-out
and
ease-in
are initially slower-moving than
linear
.
A few seconds later,
ease
has overtaken
ease-out
.