CSS allows you to craft engaging and delightful animations for your visitors with precise control over their pace using the animation timing function. You can decide how many times an animation should play and when it will start playing after the page is opened. You can control the animation to work just like you want it to.
Suppose you want to create an animation that begins slowly, speeds up in the middle, and slows down at the end. To achieve this, you can use the CSS animation-timing-function property.
Let's walk through how you can use this property to control the pace of the animation explained below.
CSS Animation Timing Function
The CSS property animation-timing-function controls the acceleration and deceleration of an animation during its cycle.
Note that this function doesn't impact the animation's duration, which is set by the animation-duration property in seconds or milliseconds. However, the animation-timing-function does influence the user's perception of the animation's speed.
Depending on the chosen value, an animation may start slowly, accelerate, maintain a constant speed, or instantly reach its end state. These are just a few examples of what the animation timing function can achieve.
Now, let's examine how to write the animation-timing-function and explore the possible values it can take.
Animation Timing Function Syntax
The syntax of the CSS animation timing function is:
There are six possible keyword values for this function: ease, linear, ease-in, ease-out, ease-in-out, step-start, and step-end. We will explain each of these as well as the function values, steps( ) and cubic-bezier ( ), below.
Webkit Animation Timing Function
You might also see the animation timing function written with a vendor prefix. These prefixes are typically added when developers are experimenting with CSS properties that aren’t fully supported in certain browsers or versions of that browser.
For Safari and Chrome, the vendor prefix is -webkit-. This prefix is unnecessary if the developer is using the 9.0 version of Safari or 43.0 version of Chrome, since these versions fully support the animation timing function. However, the -webkit- prefix should be added when using more outdated versions of these browsers.
Vendor prefixes are always added in front of the property name in the declaration. Here’s how to write the animation timing function with the -webkit- prefix:
CSS Animation Timing Function Values
There are multiple possible values for the CSS animation timing function. The most common are ease, linear, ease-in, and ease-out, but there are several others that offer more granular control over the acceleration of the animation. Let’s define each value below.
Ease
The animation starts slow, speeds up, then slows down. If no other value is assigned, the function will be set to ease by default.
See the Pen animation timing function: ease by Christina Perricone (@hubspot) on CodePen.
Ease-in
The animation has a slow start, then gradually speeds up.
See the Pen animation timing function: ease-in by Christina Perricone (@hubspot) on CodePen.
Ease-out
The animation starts quickly, then gradually slows down.
See the Pen animation timing function: ease-out by Christina Perricone (@hubspot) on CodePen.
Ease-in-out
The animation has both a slow start and a slow end, speeding up in the middle.
See the Pen animation timing function: ease-in-out by Christina Perricone (@hubspot) on CodePen.
Linear
The animation has the same speed from start to end.
See the Pen animation timing function: linear by Christina Perricone (@hubspot) on CodePen.
Step-start
The animation jumps instantly to its final state.
So let’s say the animation is set to start at 0px, then move 150px right, and its duration is 4 seconds. Instead of gradually moving to the right over that span of time, it will instantly jump 150px to the right.
See the Pen animation timing function: step-start by Christina Perricone (@hubspot) on CodePen.
Step-end
The animation stays at the initial state until the end of its animation cycle, when it instantly jumps to the final state.
Using the same hypothetical from above, the animation will remain at 0px for most of the animation cycle until jumping instantly 150px to the right at the very end.
See the Pen animation timing function: step-end by Christina Perricone (@hubspot) on CodePen.
Notice in the example above, I dropped the animation-iteration-count property used in the previous examples and added the animation-fill-mode property. Set to “forwards,” this property ensures the animated element keeps the appearance of its final state even after the animation completes (ie. it won't reset its position).
Steps(n, jump-term)
To define a specific number of steps before the animation reaches its end state, you can use steps( ). The parentheses should contain one integer and one jump-term. The animation will not move gradually through its animation cycle — instead it will jump from state to state instantaneously.
There are four possible jump-terms:
- Jump-start (or start): the first jump happens when the animation begins
- Jump-end (or end): the last jump happens when the animation ends
- Jump-none: there is no jump at the beginning or end
- Jump-both: there is a pause at both the beginning and end
Let’s say n is 4 so there are 4 steps. Jump-start means the animation holds temporarily at 0%, 25%, 50%, and 75%. Jump-end means the animation holds at 25%, 50%, 75%, and 100%. Jump-none means the animation makes 4 stops between 0% and 100% along the animation cycle. Jump-both means the animation makes 4 stops including the 0% and 100% marks (so on the 0%, 33.3333%, 66.6666% and 100%).
In the example below, the animation is set to take six steps between 0% and 100% along the animation cycle.
See the Pen animation timing function: steps(n, jump-term) by Christina Perricone (@hubspot) on CodePen.
Cubic-bezier(x1, y1, x2, y2)
For even more control over your animation’s timing, you can specify a cubic Bézier easing function. The parentheses should contain two pairs, so four numbers in total. These represent the x- and y-coordinates of two points on the curve. Both x values must be in the range [0, 1].
Technically, the non-step keyword values each represent a cubic Bézier curve with fixed four point values. These are as follows:
- Ease = cubic-bezier(0.25, 0.1, 0.25, 1.0)
- Ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
- Ease-out = cubic-bezier(0, 0, 0.58, 1.0)
- Ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)
- Linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
If you’d like to create a different speed curve for your animation, then you can use the cubic-bezier() function and define it with non-predefined values. So let’s say I want to create a more dramatic speed curve than ease-out. So I want the animation to move very quickly at the beginning of its animation cycle and then slow down at the end. In that case I could use the following cubic-bezier( ) function: cubic-bezier(.05, .8, .1, .95).
Here’s the difference between the curve of “ease-out” and the curve of the cubic-bezier( ) function value, according to this graphing tool.
And here’s how the animation looks when set to the cubic-bezier( )function value above.
See the Pen animation timing function: cubic-bezier(x1, y1, x2, y2) by Christina Perricone (@hubspot) on CodePen.
Animation Timing Chart
The chart below shows an animation with its timing set to each of the different values: ease, ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps( ), and cubic-bezier ( ).
See the Pen CSS animation timing function: all values compared by Christina Perricone (@hubspot) on CodePen.
Accelerate Your CSS Animations
With CSS, you have extensive control over your animations. You can control the duration, direction, start time, and pace of your animations, among other characteristics. Controlling the pace of your animation is as easy as adding another line of CSS, or another value when using the animation shorthand property.
