Transition nedir?

CSS kursu · Orta seviye · Ders 58/98

transition özelliğinin temelini öğrenirsin.

Transition nedir?

Bir transition (geçiş), bir CSS özelliğinin değerinin yumuşakça değişmesini sağlar. Örneğin bir düğmenin rengi hover'da aniden değil, birkaç saniyede kayarak değişir.

Geçiş, iki durum arasındaki ara değerleri tarayıcının hesapladığı kısa bir animasyondur. Yalnızca transition bildirimini yazarsın; ara kareleri sen tanımlamazsın. Sonuç akıcı, profesyonel bir his verir.

State change nedir?

Transition'ın çalışması için bir state change (durum değişimi) gerekir. En yaygın tetikleyiciler: :hover (fareyle üzerine gelme), :focus (odaklanma), :active (tıklama anı) ve :checked (onay kutusunun işaretli hâli).

Bunların dışında @media sorguları ve JavaScript ile sınıf eklemek de durum değişimi sayılır. Her durum değişiminde transition, belirttiğin özellikleri yumuşakça günceller.

Düğme hover efekti

Bir düğme tasarladın; hover'da arka plan rengi maviye dönsün. Transition olmadan renk aniden atlar; kullanıcı gözünü kırpar gibi hisseder. transition: background-color 0.3s eklersen renk 0.3 saniyede akar.

Yumuşak geçiş, arayüze hissi verir. Modern web sitelerinde neredeyse tüm hover ve focus etkileri bir transition taşır.

Uygulama Düğmeye hover geçişi ekle

.btn öğesine transition: background-color 0.3s bildirimini ekle. .btn:hover durumu için background-color: navy tanımla. Böylece hover'da renk yumuşakça mavi tonundan navy tonuna akar.

Örnek çözümü göster

.btn {
  background-color: #2563eb;
  color: #ffffff;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: navy;
}

Kendini test et

Hangi senaryoda transition işe yarar?
```
/* hover'da yumuşak renk değişimi istersek */
.btn { transition: background-color 0.3s; }
```
- Tablo hücre genişliklerini eşitlemek
- Hover'da düğme renginin yumuşakça değişmesi
- Sayfa yüklenme hızını artırmak
- Yazı tipi dosyasını sıkıştırmak
Cevabı göster

Hover'da düğme renginin yumuşakça değişmesi — Doğru. Hover bir durum değişimidir; transition renk değişimini yumuşakça yayar.

Geçiş bildirimini yaz

.btn {
  ____: background-color 0.3s;
}

Cevabı göster

.btn {
  transition: background-color 0.3s;
}

Durum seçicisini tetikleyicisiyle eşleştir

:hover

Fare öğenin üzerine gelince
:focus

Öğe odak kazanınca
:active

Tıklama anında
:checked

Onay kutusu işaretlenince

Transition nedir?