Transition-property

CSS kursu · Orta seviye · Ders 59/98

transition-property ile hangi özelliğin geçiş yapacağını öğrenirsin.

transition-property

transition-property, hangi CSS özelliğinin geçiş yapacağını seçer. transition-property: background-color yazarsan yalnızca arka plan rengi yumuşakça değişir; diğer özellikler anında atlar.

Hangi özelliğin geçiş yapacağını açıkça belirtmek, istenmeyen animasyonları önler. Örneğin yalnızca rengin akmasını isterken genişlik de animasyona girerse düzen bozulur.

Birden çok özellik ve all

Birden çok özelliği virgülle ayırarak geçişe alabilirsin: transition-property: color, background-color. İkisi de hover'da yumuşakça değişir; sıraları senin yazım sıranı izler.

Tüm geçiş yapılabilir özellikleri kapsamak için all anahtar kelimesi vardır. transition-property: all yazarsan her özellik geçişe girer. Kolaydır ama istemediğin özelliklerin de animasyona girmesine dikkat et.

Bağlantı rengi geçişi

Bir menüdeki bağlantılar hover'da koyu kırmızıya dönsün. transition-property: color ile yalnızca yazı rengini geçişe alırsın; alt çizgi, kenar boşluğu gibi diğer özellikler anında kalır.

Bu seçici yaklaşım, kullanıcıya hangi değişimin önemli olduğunu gösterir. Renk akar; düzen sabit. Etki sade ama belirgin hissedilir.

Uygulama Bağlantıya color geçişi ekle

.link öğesine transition-property: color bildirimini ekle; böylece yalnızca yazı rengi geçişe girsin. .link:hover durumu için color: darkred tanımla. Alt çizgi ve diğer özellikler anında kalsın.

Örnek çözümü göster

.link {
  color: #1d4ed8;
  text-decoration: underline;
  transition-property: color;
}

.link:hover {
  color: darkred;
}

Kendini test et

transition-property: opacity ne yapar?
```
.pill {
  transition-property: opacity;
}
```
- opacity özelliğini 0 yapar
- opacity değerini sabitler, değişmez
- Yalnızca opacity özelliği yumuşakça geçiş yapar
- Öğeyi görünmez yapar ve gizler
Cevabı göster

Yalnızca opacity özelliği yumuşakça geçiş yapar — Doğru. transition-property yalnızca saydamlık değerinin yumuşakça değişmesini sağlar; değeri belirlemez.

Yalnızca yazı rengi geçiş yapsın

.link {
  transition-property: ____;
  color: #1d4ed8;
}

Cevabı göster

.link {
  transition-property: color;
  color: #1d4ed8;
}

Özelliği neyi değiştirdiğiyle eşleştir

background-color

Arka plan rengi
color

Yazı rengi
opacity

Saydamlık
width

Genişlik

Transition-property