The animation-timing-function property
The animation-timing-function property
sets a speed of change (acceleration) of
an animation. For example, first slow,
then fast, then slow, etc.
Syntax
selector {
animation-timing-function: value;
}
Values
| Value | Description |
|---|---|
ease |
First slowly, then fast, and finally slowly again. |
ease-in |
It starts slowly and gradually speeds up. |
ease-out |
It starts fast and gradually stops. |
ease-in-out |
First slowly, then fast, and then slowly again at the end. It differs from ease in speed. |
linear |
Always the same speed. |
step-start |
There is no animation, the property immediately takes its final value. |
step-end |
There is no animation, the property waits
for the time specified in
animation-duraton,
and then immediately takes the final value.
|
steps |
The property value changes in fits and starts. |
cubic-bezier |
A Bezier curve that can define arbitrary animation. See Bezier curve generator. |
Default value: ease: ease.
Comparison of different values
Hover the mouse over the blocks below to see all types of time functions in action:
See also
-
the
animationproperty
that is a shorthand for animation -
the
@keyframescommand
that set keyframes for an animation -
a smooth
transition, representing an animation when hovering over an element
