Shots in this scene

← scene 02 · Purpose and Principles → scene 04 · Transforms and Keyframe Animations ▦ the storyboard

SHOT 3.3Beginner ~22 min · shot 3 of 6

Several Properties, Delays and Order

In one line

A transition list gives each property its own duration, curve and delay, and shorter lists repeat to fit. Delays turn separate transitions into a sequence, and the transition: all shortcut animates changes nobody planned.

0/6 · 0%

Think of it like this

A stage crew changes a set between scenes. The curtain closes, the sofa slides off, the lamp is lowered, the curtain opens. Nobody does it all at the same instant, and nobody moves props the scene does not need. A list of transitions with delays is the crew's cue sheet. transition: all is telling every crew member to move whatever they like.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

transition list: Several transitions on one element separated by commas, each with its own property, duration, curve and delay.
delay: How long the browser waits after a change before a transition starts. A negative delay starts the transition part-way through.
stagger: Giving a group of elements growing delays so they move one after another.
transition: all: A transition on every animatable property, including ones added or changed later. Quick to write, and costly later.

Step by step

01Read the four cards

Run "Lists, repeats and a negative delay". The console prints the transitions each card started. Card A has four, with durations 400, 200, 400 and 200 ms: its two-item list repeated.

02Find the negative delay

Card B's transform has delay -150. Press Toggle all four cards, then pause at the first frame: its transform bar starts part-way in and ends at 150 ms, while its opacity runs 300 ms.

03Compare all with a list

In "The all trap", the console shows what each action animated on each card. Press Dark theme and look at the timeline: the first card gets seven tracks, the second one.

04Play the choreography

In "Open in sequence, close together" press Open / close. Slow it to 0.25×. Three bars start at 0, 120 and 240 ms. On close they all start at 0 and last 150 ms.

Try it yourself

1
Shorten a list
In the first example change card A's transition-duration: 200ms, 400ms; to 300ms;. Toggle: all four tracks are now 300 ms. One value repeats for every property.
2
Make the negative delay positive
Change card B's -150ms to 150ms. Toggle and pause at the first frame: the transform has not moved yet, and it runs from 150 ms to 450 ms. The opacity fade, with no delay, is already under way.

Code & diagrams

Lists, repeats and a negative delay

Four cards, one class toggle each. The audit lists the transitions each card started: A repeats its short lists, B starts its transform part-way, C is `all`, D names opacity twice.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

a: background-color 400ms | opacity 200ms | transform 400ms delay 100ms | width 200ms
b: opacity 300ms | transform 300ms delay -150ms
c: background-color 300ms | opacity 300ms | transform 300ms | width 300ms
d: opacity 600ms

The all trap

The same three actions on two cards, one with transition: all and one with a list. The console shows which properties each action animated.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

hover -> all: background-color, transform  | listed: background-color, transform
theme -> all: background-color, border-bottom-color, border-left-color, border-right-color, border-top-color, color, font-size  | listed: background-color
wide -> all: width  | listed: nothing

Open in sequence, close together

The open state carries the delays, the base state does not. The audit prints the delays of both directions.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

open: bg delay 0 dur 200 | sub delay 240 dur 200 | title delay 120 dur 200
close: bg delay 0 dur 150 | sub delay 0 dur 150 | title delay 0 dur 150

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Let a script change width under transition: all

In "The all trap", press Set width and look at the timeline.

terminal

$ Press Set width and read the all card's track

── what you'll see ──

The first card grows over 300 ms with a red `transition · width` track. The listed card jumps to 120 px in a single frame and shows no track.

The console printed `wide -> all: width | listed: nothing`.

Myth vs fact

Myth

A delay waits for the previous transition to finish.

Fact

Every delay counts from the moment of the change. To run one after another, add the first one's duration to the second one's delay yourself.

Myth

transition: all is harmless because it only affects what changes.

Fact

It affects everything that changes, including changes from scripts, themes and media queries that you never planned to animate.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
A delay on the base rule applies when the element returns to its normal state, and a delay on the state rule applies when it enters that state. Put long delays on entering only, so that leaving does not feel sticky (Phase 2's rule: leave fast).
▸
During its delay a transition exists and is running, with fill: backwards behaviour: the element shows its old value, not the new one (the timeline hatches the delay). A positive delay on a hover can therefore feel like a missing hover on a quick pass.

Remember this

1
The problem this solves: a real component changes several properties at once (a card lifts, fades and changes colour), and they should not all take the same time. Writing the transitions as a list also keeps the component from animating changes you did not plan, such as a width set by a script or a theme change.
2
Comma lists. transition: opacity 200ms, transform 400ms 100ms is two transitions: opacity for 200 ms, transform for 400 ms after a 100 ms wait. The four longhands take lists too, matched by position: the first property gets the first duration, the first curve and the first delay.
3
Mismatched lists repeat. If transition-property has four names and transition-duration has two values, the durations repeat: 200ms, 400ms, 200ms, 400ms. A delay list of three repeats the same way (measured in the first example below: width got delay 0 and background-color got delay 0, not 100). A list that is longer than the property list is cut. The same property named twice: the last one wins (opacity 300ms, opacity 600ms gave one 600 ms transition).
4
A negative delay starts part-way through. transform 300ms -150ms does not wait: it begins as if 150 ms had already passed. With ease, its first frame already showed the box 24 of 30 pixels along, and it finished after 150 ms of real time (measured). It is useful to skip the slow start of a curve, and a surprise when you meant a positive number.
5
Delays make a sequence. To make a title appear after its background, give the title the delay (transition: opacity 200ms ease-out 120ms). The delay counts from the moment of the change, not from the end of the other transition, so you choose each delay yourself. Because the settings come from the after-change style (Topic 3.1), you can put different delays on the open state and on the base state. In the last example the card opens as a stagger (0, 120, 240 ms) and closes all at once in 150 ms.
6
**The transition: all trap.** all means every animatable property on the element, now and in the future. In the audit below, the same three changes animate background-color and transform on both cards for a hover (fine), but a dark-theme class makes the all card start seven transitions (background, color, four border colours and font-size) and a script setting width starts a layout transition. The listed card animates only what it names, so color, the borders and width snap. all is fine for a throwaway prototype. In production, name the properties.

Explain it without notes

How does the browser match a list of three properties to a list of two durations?

Why can transition: all make a theme switch slow?

How do you make one element appear 120 ms after another, and disappear together with it?

Practice

Write a transition list for a card that lifts 4 px over 150 ms, fades its shadow in over 250 ms, and changes its border colour over 100 ms.

A .panel has transition: all 300ms. A script sets style.height, and the panel animates. Make only opacity and transform animate.

Done when you can

You can write a list with different durations and delays per property
You can predict how shorter lists repeat
You can put delays on the state that needs them, so entering and leaving differ
You can say what transition: all animates that you did not plan

Command Palette

Words you'll meet

Step by step

01Read the four cards

02Find the negative delay

03Compare all with a list

04Play the choreography

Try it yourself

Shorten a list

Make the negative delay positive

Code & diagrams

Break it on purpose

Let a script change width under transition: all

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Done when you can