Workshop › Traffic light › Step 8 of 12

A timeline for a lamp

What we are doing

An animation is a timeline: what a property is at each moment. @keyframes glow says: be bright for the first 30% of the time, dim for the rest.

```css
@keyframes glow {
  0%, 30% {
    opacity: 1;
  }
  35%, 100% {
    opacity: 0.25;
  }
}
```

What it means

• The percentages are moments in the animation: 0% is the start, 100% the end.
• From 0% to 30% the lamp is fully bright; from 35% to 100% it is dim. Between 30% and 35% it fades.

Your turn

Write the @keyframes block at the end of the styles, under the green lamp's rule.

Skills: Styling with CSS

← Turn them off Play the timeline →

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