CSS Academy · Lesson

Chaining and Sequencing Animations

Create complex sequences by chaining multiple animations with staggered delays.

Chaining and Sequencing Animations is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Sequence Animations?

Complex UI effects often require multiple animations that happen in order: an element slides in, pauses, then fades out. CSS provides several tools to chain animations without JavaScript.

Using animation-delay for Sequencing

The simplest sequencing: calculate when the next animation should start based on the previous duration:

.element {
  animation:
    slideIn  400ms ease-out 0ms    both,
    fadeOut  300ms ease-in  600ms  forwards;
  /* slideIn runs 0-400ms, then 200ms gap, fadeOut at 600ms */
}

Multi-Step Keyframes

The cleanest approach for a single element: encode the entire sequence in one @keyframes rule with percentage waypoints:

@keyframes intro {
  0%   { opacity: 0; transform: translateY(30px); }
  30%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

.toast {
  animation: intro 3s ease both;
}

CSS Custom Properties for Duration

Store durations in CSS variables for easy coordination across chained animations:

:root {
  --slide-dur: 400ms;
  --fade-dur: 300ms;
  --pause: 200ms;
}

.box {
  animation:
    slideIn var(--slide-dur) ease both,
    fadeOut var(--fade-dur) ease calc(var(--slide-dur) + var(--pause)) both;
}

animation-timeline (Modern)

The Web Animations API and scroll-linked animations (ScrollTimeline) allow sophisticated sequencing without delay math. This is the future of complex CSS animation orchestration.

CSS Custom Property Stagger

Drive stagger delays from CSS custom properties set inline or via JavaScript:

.item {
  animation: slideIn 400ms ease both var(--delay, 0ms);
}

JavaScript-Driven Sequencing

For precise multi-element sequences, use the Web Animations API or a library like GSAP. CSS alone is limited for coordinating independent elements with complex interdependencies.

Attention Animations

A pulse-then-settle attention animation sequence:

@keyframes attention {
  0%         { transform: scale(1); }
  15%, 45%   { transform: scale(1.15); }
  30%, 60%   { transform: scale(0.95); }
  75%, 100%  { transform: scale(1); }
}

.notification {
  animation: attention 1s ease;
}

AnimationEnd Event

Listen for animationend in JavaScript to trigger the next step programmatically:

el.addEventListener('animationend', (e) => {
  if (e.animationName === 'slideIn') {
    el.classList.add('phase-2');
  }
});

Page Transition Pattern

A CSS page transition sequence using class toggling:

@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; } }

.page-leaving { animation: fadeOut 300ms forwards; }
.page-entering { animation: fadeIn 300ms; }

Loading State Skeleton

A multi-step skeleton loading animation using offsets:

.skeleton-text {
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-text:nth-child(2) {
  animation-delay: 0.2s;
}

.skeleton-text:nth-child(3) {
  animation-delay: 0.4s;
}

Quick Check

What is the best way to encode a complete multi-step animation sequence for a single element in CSS?

Recap

CSS animation sequencing uses delays timed to previous durations, multi-step @keyframes with percentage waypoints, or custom property duration variables. The animationend event enables JavaScript-triggered sequential phases. For complex multi-element orchestration, consider the Web Animations API.

Frequently asked questions

Is the “Chaining and Sequencing Animations” lesson free?

Yes — the full text of “Chaining and Sequencing Animations” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Chaining and Sequencing Animations”?

Create complex sequences by chaining multiple animations with staggered delays. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Chaining and Sequencing Animations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

@keyframes Syntax and Animation Property
Animation Direction Fill-Mode and Iteration
Chaining and Sequencing Animations
Accessible Animations with prefers-reduced-motion

← Back to CSS Academy