The animation-timing-function property is used to define the pattern of speed of the animation applied to an element over time by specifying a speed curve function. It allows you to define how the speed of an animation will change in one cycle.
CSS
animation-timing-function: value;
Animations in CSS allow you to change the state of an element. While the animation-timing-function property is used to specify the speed pattern of animations, there are other animation properties as well like animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.
See the Pen CSS animation-timing-function by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.
Values
ease : Gives animations a slow start, fast speed in middle and then slow end. This is equivalent to cubic-bezier(0.25,0.1,0.25,1). This is the default value.
linear : Gives animations the same speed from start till end. This is equivalent to cubic-bezier(0,0,1,1).
ease-in : Gives animations a slow start. This is equivalent to cubic-bezier(0.42,0,1,1).
ease-out : Gives animations a slow end. This is equivalent to cubic-bezier(0,0,0.58,1).
ease-in-out : Gives animations a slow start and slow end. This is equivalent to cubic-bezier(0.42,0,0.58,1).
step-start : Specifies that the end state is directly reached as soon as the animation starts and it remains till the end of the animation duration. This is equivalent to steps(1, start).
step-end : Specifies that the initial state remains till the end of the animation duration, where the end state is directly reached. This is equivalent to steps(1, end).
steps(int,start|end) : This is a stepping function having two parameters. The first parameter is a positive integer which specifies the number of steps in which the final state is reached from the initial state. For example, if the integer is 4, then the final state will be reached in 4 steps.
The second parameter can be one of the following.
start - The first intermediate state is reached directly at the beginning of the animation.
end - The last state is reached directly at the end of the animation.
If the second value is not given, then it is by default assumed end.
cubic-bezier(n,n,n,n) : Defines a cubic-bezier function with four parameters, each of which can be given a value between 0 and 1.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Examples
In the following demo, an animation named "stretch" is applied to eight blocks which increases the width to twice. Different patterns of speed change of the animation are assigned to the different blocks. The prefix -webkit- is used for better browser support.
HTML
<div id="fnc2">linear</div>
CSS
@keyframes stretch {
0% {width: 100px;}
100% {width: 200px;}
}
div {
margin-top: 10px;
width: 100px;
height: 40px;
background-color: #007399;
text-align: center;
font-size: 20px;
-webkit-animation-name: stretch;
animation-name: stretch;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#fnc2 { /* function for second block */
-webkit-animationn-timing-function: linear;
animation-timing-function: linear;
}
See the Pen CSS animation-timing-function by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
Now, have a look at an example of giving stepping function as value to the animation-timing-function property.
Both the values steps(4,start) and steps(4,end) specify that there are 4 steps to reach from initial state to final state. The timing is adjusted automatically such that the first step occurs as soon as the animation starts for the first value and the last step occurs at the point the animation ends for the second value.
HTML
<div id="fnc1">steps(4,start)</div>
<div id="fnc2">steps(4,end)</div>
CSS
@keyframes stretch {
0% {width: 100px;}
100% {width: 200px;}
}
div {
margin-top: 10px;
width: 100px;
height: 40px;
background-color: #009973;
text-align: center;
-webkit-animation-name: stretch;
animation-name: stretch;
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
#fnc1 { /* timing function for first block */
-webkit-animation-timing-function: steps(4,start);
animation-timing-function: steps(4,start);
}
#fnc2 { /* timing function for second block */
-webkit-animation-timing-function: steps(4,end);
animation-timing-function: steps(4,end);
}
See the Pen Stepping function values to animation-timing-function property by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
Giving different timing functions for different animations
If multiple animations are applied to an element, then you can define different timing functions for different animations.
If only one value is given to the animation-timing-function property, then it decides the speed pattern of all the animations applied to the specified element. To give them different speed patterns, give multiple comma separated values to the animation-timing-function property corresponding to the respective comma separated animation names given to the animation-name property.
Look at this code.
CSS
animation-name: reshape, colorChange;
animation-timing-function: steps(3,end), ease-in;
In this code, the timing-function values given for the animations named "reshape" and "colorChange" are steps(3,end) and ease-in respectively.
Look at this code in effect in the following demo.
HTML
<div></div>
CSS
@keyframes reshape{
0% { border-radius: 50%; }
50% { border-radius: 0%; }
100% { border-radius: 50%; }
}
@keyframes colorChange{
0% {background-color: #8f5656;}
100% {background-color: #0000ff;}
}
div {
width: 150px;
height: 150px;
background-color: #8f5656;
border-radius: 50%;
-webkit-animation-name: reshape, colorChange;
animation-name: reshape, colorChange;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: steps(3,end), ease-in;
animation-timing-function: steps(3,end), ease-in;
}
See the Pen CSS animation-timing-function example by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all the major browsers.
