Workshop › Traffic light › Step 9 of 12

Play the timeline

What we are doing

animation connects the timeline to the lamps: play glow over 6 seconds, again and again.

```css
animation: glow 6s infinite;
```

What it means

• glow is the name of the keyframes, 6s how long one round takes, infinite repeats it forever.

Your turn

Add the line inside .lamp, under opacity. Watch for a few seconds.

Skills: Styling with CSS

← A timeline for a lamp One after another →

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