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

Bir lamba için zaman çizelgesi

Ne yapıyoruz

Animasyon bir zaman çizelgesidir: bir özelliğin (burada opacity) zamanın hangi anında ne olacağını söyler. @keyframes ile bu çizelgeyi yazıp ona ad veriyoruz: glow (parla). Bu adımda henüz hiçbir lambaya bağlamıyoruz.

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

Ne işe yarıyor

@keyframes glow { → glow adlı bir zaman çizelgesi.
Yüzdeler animasyonun anları: 0% başlangıç, 100% son. Animasyon 6 saniye sürerse 30% = 1,8. saniye.
0%, 30% { opacity: 1; } → başlangıçtan %30'a kadar lamba tam parlak.
35%, 100% { opacity: 0.25; } → %35'ten sona kadar sönük.
%30 ile %35 arasını tarayıcı kendisi doldurur: lamba yavaşça söner.

Sıra sende

@keyframes bloğunu stillerin sonuna, yeşil lambanın kuralının altına yaz. Çalıştır.

Beceriler: CSS ile görünüm

← Söndür Çizelgeyi oynat →

Tüm adımlar