How to Use CSS Animation Delay

As marketers, it’s important to come up with content that’s not only informative, but also engaging. Some marketers achieve that by adding animation to their articles — it's a fun way to engage users and draw attention to your content.

In the early days, simple animations were made using Flash. However, using Flash (for web content) can slow your website down. Since speed is an important factor for SEO and the user experience, Flash isn’t great for modern marketers trying to rank in search.

Instead, you can use CSS, a lightweight language that pairs with HTML. However, we don't want to assault viewers with too many animations right at the start — this is where CSS animation delay comes in handy. We'll cover how this property works in this guide. But first, a review.

What are CSS Animations?

In a nutshell, CSS (cascading style sheets) affects how HTML elements appear on a webpage. CSS styles can be static (nonmoving) or animated.

CSS animation works by directing one or more CSS properties of an element to change from one value to another. Some animatable properties include background color, size, and position on page (to animate movement). These may not seem like much, but when you put everything together, you can get impressive results.

To create a CSS animation, you must first understand keyframes and animation properties.

• @keyframes are the foundation of CSS animations. They indicate the start and end of the animation and describe how each element should behave at each stage of the animation.
• Animation properties pair CSS elements with @keyframes to further establish the nature of the animation.

There are several other additional animation properties that you’ll want to get familiar with as you learn more about CSS animation, but the rest of this article will focus on how to use CSS animation delay.

CSS Animation Delay

The animation-delay property sets how much time passes before an animation starts. It’s expressed in seconds and milliseconds.

CSS Animation Delay Syntax

The CSS animation-delay property has the following syntax:

As you can see, there are three possible values: time, initial, and inherit.

The first option is [time], which is the number of seconds or milliseconds before the animation starts. When the value is positive, such as 2s or 500ms, the animation begins after that amount of time has passed.

If the value for [time] is negative, the animation begins as if it’s been playing for that amount of time. For instance, when the value is -2s, the animation begins immediately, two seconds into the sequence.

The second option, initial returns the property to the default value for the element.

Finally, inherit turns the property into a child of the parent element.

For any animation, you’ll also want to define animation-duration and animation-name. As you might expect, animation-duration defines how long the animation will run. animation-name creates an individual reference point for a particular animation.

The example below demonstrates what different CSS animation delays look like when applied to an animation. (To replay the animations, click "Rerun".)

See the Pen css animation delay by Christina Perricone (@hubspot) on CodePen.

CSS Animation Delay Between Loops

You may want to create an animation that pauses in between each loop. Unfortunately, animation-delay only affects the start of the animation. Once the animation begins, it will loop without any delays. There are no properties for "CSS animation delay between iterations" either.

To achieve this effect, you'll need to work the pauses into the animation itself.

Let's say you want to create an animation that does the following:

1. The element grows to 1.5x its original size in two seconds.
2. The element then shrinks back down to its original size in two seconds.
3. The animation pauses for one second.
4. The animation repeats.

With some quick math, we can work out percentages for when each phase of the animation happens. In total, one loop lasts five seconds (2 + 2 + 1). Therefore, the first step will take up the first 40% of the animation duration, the second step will take up the next 40%, and the pause takes the final 20%.

When we work our percentages into our @keyframes rules, it looks like this:

Lastly, we'll set animation-duration to 5s and set animation-iteration-count to infinite so the animation loops on repeat.

In the end, we get the effect of an "animation delay" between iterations.

See the Pen css animation delay: pause between iterations by Christina Perricone (@hubspot) on CodePen.

If you want to put a delay before the animation begins, use animation-delay as described above.

CSS Animation Delay

When done well, CSS animations can provide a valuable interface for interaction and gathering feedback on important issues. They can also enhance the customer experience and add personality to your brand.

There are many more amazing things to do with CSS and its counterpart HTML. It’s not only exciting to tinker with the tools, but the skills you learn will help you design more effective online marketing materials.

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.