 Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-timing-function Property
Sets how an animation progresses through the duration of each cycle.
| CSS |
{ animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) } |
| Script |
object.style.animationTimingFunction = linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) |
| Parameter |
Description |
Valid Values |
| linear |
Specifies an animation effect with the same speed from start to end. |
equivalent to cubic-bezier( 0,0,1,1 ) |
| ease |
Default value. Specifies an animation effect with a slow start, then fast, then end slowly. |
equivalent to cubic-bezier( 0.25,0.1,0.25,1 ) |
| ease-in |
Specifies an animation effect with a slow start. |
equivalent to cubic-bezier( 0.42,0,1,1 ) |
| ease-out |
Specifies an animation effect with a slow end. |
equivalent to cubic-bezier( 0,0,0.58,1 ) |
| ease-in-out |
Specifies an animation effect with a slow start and end. |
equivalent to cubic-bezier( 0.42,0,0.58,1 ) |
| steps( int [ ,start | end ] ) |
Divides the animation duration into equal intervals. |
First parameter must be a positive integer ( greater than 0 ). Second parameter specifies the point at which the change of values occur, is optional, with either the value start or end. |
| step-start |
Indicates that the first step happens when the animation begins. |
Equivalent to steps( 1, start ) |
| step-end |
Indicates that the last step happens when the animation ends. |
Equivalent to steps( 1, end ) |
| cubic-bezier( n,n,n,n ) |
Defines custom values for the cubic-bezier function. |
Possible values are numeric values from 0 to 1. |
The property is read/write with a default value of ease; this attribute is not inherited.
The animation-timing-function describes how an animation progresses through the duration of each cycle.
It allows for an animation to change speed over its duration. These effects are commonly called easing functions.
The animation-timing-function may be specified once to a given animation, as determined by animation-name. In this case, the specified easing function will apply to the entire animation, from start to end.
animation-name: slide;
animation-timing-function: ease-in-out;
Easing functions may also be specified on individual keyframes in an @keyframes rule.
This method describes how the intermediate points defined for the animation will progress. In this case, different easing functions may be specified, which will apply only to the keyframes where they are set.
@keyframes bounce {
0% {
translate: 0 -50vw;
}
30%, 53%, to {
translate: 0;
animation-timing-function: ease-in;
}
40%,43% {
translate: 0 -40px; scale: 1.1;
animation-timing-function: ease-out;
}
70% {
translate: 0 -20px; scale: 1.05;
}
80% {
translate: 0; scale: .95;
animation-timing-function: ease-in-out;
}
90% {
translate: 0 -6px; scale: 1.02;
}
}
The following examples demonstrate the effect of applying a single animation-timing-function for all keyframes.
The following example demonstrates the effect of applying different animation-timing-function settings at the keyframes level.
 NOTE: This section is currently under major reconstruction. Please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time. 
For a brief overview, please see Understanding and Using CSS Animations..
animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline
|