With CSS, you can create animations that engage and delight your visitors and behave exactly how you want. You can set how many times a CSS animation repeats, when it starts to play after the page loads, and more.
You can even control the pace of the animation. For example, let’s say you want your animation to start slow, speed up in the middle of its cycle, and then slow down at the end. You can do so using the CSS animation-timing property.
Let’s walk through how you can define this property to control the pace of an animation below.
CSS Animation Timing Function
The CSS animation-timing function sets the pace of the animation. Meaning, it allows you to control when the animation speeds up and slows down during the animation cycle.
It’s important to understand that this function does not affect the actual duration of an animation. That’s set by the animation-duration property in seconds or milliseconds. But the animation-timing function does affect the user’s perception of how fast or slow the animation is.
That’s because, depending on what value you use to define the function, your animation might start slowly then accelerate. Or it might have a constant speed, or jump instantly to its end state. These are just a few possibilities with the animation timing function.
Before we take a closer look at the possible values for the animation timing function, let’s see how it’s written.
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.
The animation starts slow, speeds up, then slows down. If no other value is assigned, the function will be set to ease by default.
The animation has a slow start, then gradually speeds up.
The animation starts quickly, then gradually slows down.
The animation has both a slow start and a slow end, speeding up in the middle.
The animation has the same speed from start to end.
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.
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.
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).
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.
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.
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 ( ).
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.