Mastering Animation Timing with `animation-delay`

Hello! In our last lesson, you learned how to prompt Claude to create the individual animations for your title sequence. As we saw, the result was a bit chaotic, with every element animating at the same time.

Today, we'll bring order to that chaos. We will focus on choreographing those movements into a polished sequence, just like you planned in your storyboard. The key to this is a single, powerful CSS property: animation-delay. You'll learn not only how to use it but also how to manage timing in a clean, scalable way—a practice that should resonate with your experience in building design systems.

By the end of this 60-minute lesson, you will be able to use the 'animation-delay' CSS property to orchestrate the timing of a complex animation sequence.

---

1. The Basics of Orchestration: animation-delay

The simplest way to create a sequence is to tell each animation when to start. The animation-delay property does exactly that. It accepts a time value (e.g., 1s for 1 second, or 500ms for 500 milliseconds) and waits that long before starting the animation.

Based on your storyboard, let's say the line animation (drawLine) takes 1 second to complete. You might want the title's fadeIn animation to begin slightly before the line finishes, perhaps at 0.8s. You'd add this to your CSS:

#title {
  animation: fadeIn 1.5s;
  animation-delay: 0.8s; /* Starts after an 0.8s delay */
}

However, this introduces a common problem. What does the title look like during that 0.8-second delay? By default, it's fully visible, and then it suddenly disappears to start its fadeIn animation. This is jarring and not what we want.

The solution is another property: animation-fill-mode.

By setting animation-fill-mode: both;, you tell the browser: "During the delay, apply the styles from the start of the animation. After the animation finishes, apply the styles from the end of it."

For your fadeIn animation, this means the element will be invisible (opacity: 0) during the delay, which is exactly the effect we need for a smooth entrance.

---

2. A Scalable Approach: CSS Custom Properties

Manually setting a delay for every single element works, but it can become tedious and difficult to manage. If you decide to change the timing of one element, you might have to recalculate and update the delays for all subsequent elements. This is not a scalable system.

A much cleaner method involves using CSS Custom Properties (often called CSS variables). This technique separates the logic of the timing from the implementation.

You can define a custom property—let's call it --order—for each element in your HTML, and then use a single CSS rule to calculate the delay.

This video from Fireship provides a fast-paced, practical demonstration of this exact technique for a staggered SVG animation.

This method is elegant because it's declarative. You're not hardcoding delays; you're just defining the order of the elements. The CSS then calculates the actual delay for you. If you want to change the sequence, you only need to change the --order values in your HTML.

This article from CSS-Tricks provides more detail on why this is the preferred modern approach.

---

3. Your Turn: Orchestrate the Title Sequence

Now, let's apply this powerful pattern to your project. We'll use Claude to refactor the code from the last lesson. Your goal is to sequence the animations according to your storyboard:

1. The line draws itself.
2. The title fades in.
3. The subtitle fades in.

Your Task:
Open your project in VS Code and provide Claude with a prompt to implement this staggered timing.

Here is an example of a clear, structured prompt you could use:

"I need to orchestrate the animations in my index.html and style.css files. Please modify the code to achieve the following:

1. Use CSS custom properties for timing. Add an inline style attribute to each animated element (#line, #title, #subtitle) to define a custom property named --order. Set --order: 1 for the line, --order: 2 for the title, and --order: 3 for the subtitle.
2. In the style.css file, create a single class named .animated that will apply to all three elements.
3. This .animated class should use the --order variable to calculate the animation-delay. The formula should be calc((var(--order) - 1) * 400ms). This means the first item has no delay, the second is delayed by 400ms, and the third by 800ms.
4. Ensure that animation-fill-mode: both; is applied to prevent elements from appearing before their animation starts.
5. Finally, update the HTML to apply the .animated class to the #line, #title, and #subtitle elements, in addition to their IDs."

After you run the prompt, examine the code Claude generates. Open your index.html in the browser with Live Server. You should now see your title sequence play out exactly as planned, with each element appearing in a perfectly timed succession. Experiment by changing the --order values in the HTML to see how easily you can now re-choreograph the sequence!

---

Conclusion

You have now mastered the art of animation orchestration in CSS. You've gone from creating isolated movements to choreographing a complete, multi-part sequence with precise timing.

Key Takeaways:

• The animation-delay property is the fundamental tool for staggering animations.
• animation-fill-mode: both; is crucial for ensuring elements are in their correct starting state during the delay period.
• Using CSS Custom Properties (e.g., --order) combined with calc() is a modern, scalable, and maintainable method for managing complex animation sequences. This separates your timing logic from your CSS rules.

In our next lesson, we will move on to the final stage of our project: exporting your creation. You'll learn how to record your browser-based animation as a high-quality MP4 video and explore the powerful workflow for creating Lottie animations directly from Figma.