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.
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.
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.
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.
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.
Originally published Sep 10, 2021 7:00:00 AM, updated September 10 2021