The animation-timing-function property is used to specify a timing function which defines the speed over time of an object being animated. It describes how an animation will progress over one cycle of its duration, allowing it to change speed during its course.
A timing function in CSS is usually referred to easing functions.
The animation-timing-function takes a timing function as a value, which is a mathematical function that specifies the speed over time of an object being animated. It can also be defined using one of several predefined keywords for common timing functions.
If you apply more than one animation on an element, you may specify multiple timing functions, each for a corresponding animation specified using the animation-name property.
The timing function specified applies to each iteration of the animation, not the entire animation in full. For example, if an animation has animation-timing-function: ease-in-out; and <a href="http://tympanus.net/codrops/css_reference/animation-iteration-count">animation-iteration-count</a>: 2;, it will ease in at the start, ease out as it approaches the end of its first iteration, ease in at the start of its second iteration, and ease out again as it approaches the end of the animation.
For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of a keyframe and at the end of a keyframe.
In addition to being able to specify a timing function for an overall animation, you can specify an animation timing function for an individual keyframe of the animation inside the keyframe rule that is used to animate the element in that keyframe as it proceeds to the next keyframe (See the Examples section below for an example). If no timing function is specified for the keyframe, the timing function specified for the overall animation is used. You can read more about this and see an example in the @keyframes entry.
It is usually more convenient to specify the animation-timing-function in the animation shorthand property.
Official Syntax
-
Syntax: animation-timing-function:
<timing-function> - Initial: ease
-
Applies To: all elements; and
::beforeand::afterpseudo-elements - Animatable: no
Values
- <timing-function>
-
See the
<timing-function>entry for a list of possible values, detailed explanation of each, and examples and demos for each value.
Examples
The following example applies an animation-timing-function to an animation applied to two animations applied to an element:
.element {
animation-name: rotate, fall;
animation-timing-function: ease-in, ease-in-out;
}
The following example applies an animation-timing-function to individual keyframes inside a @keyframes rule:
@keyframes bounce {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 150px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
The following are all valid animation-timing-function values. See the <timing-function> entry for more values and examples.
animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); /* equivalent to the "ease-in" keyword */
animation-timing-function: steps(4, start);
animation-timing-function: ease-in-out;
Live Demo
The first element in the following demo has a keyframed animation and a timing function applied to the overall animation. The second element has a keyframed animation and timing functions applied to each individual keyframe, not to the animation as a whole. Try changing the animation, or the timing function of the first element and see how it is applied to every keyframe (because it is a keyframed animation). Also try to play with the values of the animation timing functions trying out new ones to get a feel of how it changes an animation.
View this demo on the Codrops PlaygroundBrowser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 130
- No
- 130
- 130
