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.

Download Now: Free Intro Guide to HTML & CSS

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:

animation timing function

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

animation timing function: ease-out vs cubic-bezier speed curve

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.

New Call-to-action

 css introduction

Originally published Sep 10, 2021 7:00:00 AM, updated September 10 2021

Topics:

CSS Animation