HTML and CSS Reference
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 .