Workshop › Traffic light › Step 10 of 12

One after another

What we are doing

To light them in turn, the yellow lamp starts its timeline 2 seconds later and the green one 4 seconds later.

```css
.lamp:nth-child(2) {
  background: gold;
  animation-delay: 2s;
}

.lamp:nth-child(3) {
  background: limegreen;
  animation-delay: 4s;
}
```

What it means

• animation-delay waits before starting the animation. 0, 2 and 4 seconds put the three lamps a third of a round apart.

Your turn

Add animation-delay to the yellow (2s) and green (4s) rules.

Skills: Styling with CSS

← Play the timeline One setting for the speed →

All steps

1. An empty box
2. Give the box a shape
3. Three lamps inside
4. Round lamps
5. Stack them in the middle
6. Red, yellow, green
7. Turn them off
8. A timeline for a lamp
9. Play the timeline
10. One after another
11. One setting for the speed
12. Build it yourself: a pole