Atölye › Trafik lambası › 10/12. adım

Sırayla

Ne yapıyoruz

Şimdi sırayla yanmaları için her lambanın çizelgesini farklı zamanda başlatıyoruz: sarı 2 saniye, yeşil 4 saniye geç başlasın. Kırmızı hemen başlar. Bir tur 6 saniye olduğu için üçü birbirini izler.

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

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

Ne işe yarıyor

• animation-delay: 2s; → animasyona başlamadan önce 2 saniye bekle.
• Kırmızı 0'da, sarı 2'de, yeşil 4'te başlar: her biri turun üçte biri kadar arayla yanar. 6 saniyelik tur bitince kırmızı yeniden yanar.

Sıra sende

Sarı lambanın kuralına animation-delay: 2s;, yeşilinkine animation-delay: 4s; ekle. Çalıştır ve izle.

Beceriler: CSS ile görünüm

← Çizelgeyi oynat Hız için tek ayar →

Tüm adımlar

1. Boş bir kutu
2. Kutuya biçim ver
3. İçine üç lamba
4. Yuvarlak lambalar
5. Ortada alt alta diz
6. Kırmızı, sarı, yeşil
7. Söndür
8. Bir lamba için zaman çizelgesi
9. Çizelgeyi oynat
10. Sırayla
11. Hız için tek ayar
12. Kendin yap: direk