CSS Animation Timelines: Building a Rube Goldberg Machine

Multi-stage animations can bring websites to life, creating engaging user experiences that guide attention and communicate brand personality. However, building complex animation sequences in CSS has traditionally been challenging--hardcoded delay values make animations brittle and difficult to maintain.

This guide explores an elegant approach using CSS custom properties to create maintainable, coordinated animation timelines that scale from simple sequences to elaborate Rube Goldberg-style machines. By mastering these techniques, you can create sophisticated motion design experiences that enhance your web development projects without sacrificing code maintainability.

The Problem with Hardcoded Animation Timings

When building multi-stage animations, each element needs to perform its transition at a precise time in relation to its siblings. Traditionally, developers wrote CSS with hardcoded timing values:

.section__title {
 transition-duration: 0.2s;
 transition-delay: 0.1s;
}

.section__description {
 transition-duration: 0.2s;
 transition-delay: 0.3s;
}

.section__button {
 transition-duration: 0.2s;
 transition-delay: 0.5s;
}

Three significant issues emerge with this approach:

1. Conceptual misalignment - Hardcoded values specify "starts after 0.1 seconds" but what we really want is "starts after the background transition ends." Using absolute time values misaligns code with design intent.

2. Fragile maintenance - Changing one animation step's speed requires manually updating every subsequent delay value throughout the sequence.

3. Poor readability - Transition delays mixed with styling CSS makes it difficult to scan and understand the animation sequence.

These challenges lead many developers to add JavaScript libraries, but CSS custom properties offer a powerful alternative that keeps animations pure while solving all three problems. This approach aligns with modern web development best practices that prioritize maintainable, scalable code.

Writing CSS Timelines with Custom Properties

The solution involves visualizing your animation sequence as a timeline where each step's delay is calculated relative to the previous step's timing. By using CSS custom properties, you define durations separately and compute delays through simple additions.

Step 1: Define durations for each animation step

:root {
 --background-duration: 0.2s;
 --title-duration: 0.3s;
 --description-duration: 0.3s;
 --button-duration: 0.2s;
}

Step 2: Calculate delays as relative values

:root {
 --background-delay: 0s;
 --title-delay: calc(var(--background-delay) + var(--background-duration));
 --description-delay: calc(var(--title-delay) + var(--title-duration));
 --button-delay: calc(var(--description-delay) + var(--description-duration));
}

Step 3: Apply to your elements

.section__title {
 transition-duration: var(--title-duration);
 transition-delay: var(--title-delay);
}

The benefits are immediate:

• Delays are now relative to previous animation steps
• Changing one step's speed automatically updates the entire sequence
• Timeline CSS is organized in one place rather than scattered throughout

Adding a Base Speed Variable for Global Control

The approach above is easier to work with, but changing the overall animation speed still requires updating each element individually. By making all durations relative to a --base-speed variable, you gain global control:

:root {
 --base-speed: 0.2s;

 --background-duration: calc(var(--base-speed) / 2);
 --title-duration: var(--base-speed);
 --description-duration: var(--base-speed);
 --button-duration: var(--base-speed);
}

Practical benefits:

• Adjusting --base-speed changes the entire animation's speed
• During development, set it higher to watch animations in slow motion
• Easily create responsive animation variations
• Provide alternative speeds for accessibility via prefers-reduced-motion

This global control pattern is particularly valuable when implementing advanced CSS animation techniques that require precise timing across multiple elements.

Building Complex Animations: The Rube Goldberg Machine

The custom properties timeline technique scales to build truly complex animations. Consider a CSS and SVG Rube Goldberg machine--a multi-step animation where each action triggers the next.

A Rube Goldberg animation might include:

• Dominoes falling in sequence
• A ball on string that drops when hit by the final domino
• A toy car that rolls when struck by the ball
• An 8-ball knocked into the final domino set
• Final dominoes completing the sequence

Advanced timing techniques for complex animations:

/* Overlapping animations - next step starts before previous finishes */
--domino-hit-speed: calc(var(--domino-speed) * 0.25);

/* Proportional durations for consistent apparent speed */
--last-domino-speed: calc(var(--domino-speed) * 10 / 9);

/* Chain of delays through the entire sequence */
--domino-1-delay: 0s;
--domino-2-delay: calc(var(--domino-1-delay) + var(--domino-hit-speed));
--ball-and-string-delay: calc(var(--domino-6-delay) + var(--domino-speed) * 0.2);

Key techniques demonstrated:

• Some animations start slightly before the previous step ends, creating fluid overlapping motion
• Works with both CSS transitions and keyframe animations
• Calculate total duration for coordinating viewport panning animations

These complex animation techniques build on fundamental CSS concepts like native CSS nesting to create sophisticated motion sequences.

Advanced Techniques: Overlapping Animations and Timing Adjustments

When building complex sequences, you'll encounter situations where the standard "wait for previous to finish" approach doesn't capture the motion you want.

Overlapping Animations

For actions that should feel connected rather than strictly sequential, multiply the previous duration by a fraction. If a domino falls in 0.6s but hits the next domino after only 0.15s:

--domino-speed: 0.6s;
--domino-hit-speed: calc(var(--domino-speed) * 0.25);
--next-domino-delay: var(--domino-hit-speed);

Proportional Distances

For elements traveling different distances at consistent apparent speed:

--short-domino-fall: calc(var(--base-speed) * 1);
--long-domino-fall: calc(var(--base-speed) * 2);

Keyframe Animations

The same principles apply to @keyframes animations:

.element {
 animation-duration: var(--step-duration);
 animation-delay: var(--step-delay);
 animation-name: slideIn;
 animation-fill-mode: forwards;
}

Calculating Total Duration

For animations that need to coordinate with other behaviors:

--total-duration: calc(var(--last-step-delay) + var(--last-step-duration));

Practical Applications and Best Practices

Where This Technique Shines

Page Load Animations Coordinate background, headline, description, and CTA button in a cascading sequence:

:root {
 --base-speed: 0.15s;
 --bg-in: calc(var(--base-speed) * 1);
 --headline-in: calc(var(--bg-in) + calc(var(--base-speed) * 1.5));
 --text-in: calc(var(--headline-in) + calc(var(--base-speed) * 1));
 --cta-in: calc(var(--text-in) + calc(var(--base-speed) * 1));
}

Interactive States Modals, dropdowns, and expandable panels animate with smooth coordination:

:root {
 --overlay-in: 0.2s;
 --modal-container: calc(var(--overlay-in) + 0.1s);
 --modal-content: calc(var(--modal-container) + 0.15s);
}

Product Showcases Reveal features progressively to guide users through a narrative:

:root {
 --feature-1: 0s;
 --feature-2: calc(var(--feature-1) + 0.8s);
 --feature-3: calc(var(--feature-2) + 0.8s);
}

Best Practices

1. Group all timing variables in one CSS section, separate from styling rules
2. Use descriptive names that indicate what element or action the timing controls
3. Test at multiple speeds, including slow motion, to verify timing
4. Provide alternatives via prefers-reduced-motion media query
5. Document total duration and ensure it fits within performance budgets

By implementing these animation techniques in your professional web development projects, you can create engaging user experiences that feel polished and intentional.

Summary

CSS custom properties transform complex animation timing from a maintenance burden into an organized, scalable system. By expressing animations as relative relationships rather than absolute time values, your code matches design intent and remains maintainable as designs evolve.

The Rube Goldberg machine analogy illustrates the technique's power: just as each element in a physical Rube Goldberg machine triggers the next, your CSS animations can cascade through a sequence with precise, coordinated timing. And like adjusting a machine's overall speed, a single --base-speed variable lets you speed up or slow down the entire experience.

Start with simple two or three-step sequences, then scale up to more complex animations as you become comfortable with the pattern. Your future self--and your fellow developers--will thank you when it comes time to adjust timing or add new animation steps.

Sources

• Cloud Four: CSS Animation Timelines: Building a Rube Goldberg Machine
• MDN Web Docs: Using CSS Animations