Geçişler

Bu dersin sonunda bir elemanın durumları arasındaki değişimi yumuşatabilecek ve akıcı çalışan değerleri seçebileceksiniz.

Sorun: Ani değişim

Durum Seçicileri dersinde düğmelerin rengini :hover ile değiştirdiniz. Değişim bir anda oluyordu. transition özelliği bu değişimi belirli bir süreye yayar.

Farenizi iki kutunun üzerine getirin:

<div class="kutu ani">Ani değişim</div>
<div class="kutu yumusak">Yumuşak değişim</div>

.kutu {
  padding: 16px;
  margin-bottom: 8px;
  background-color: lightblue;
}

.kutu:hover {
  background-color: teal;
  color: white;
}

.yumusak {
  transition: background-color 0.4s, color 0.4s;
}

Yazım

transition dört değer alır. Yalnızca süre zorunludur.

transition: özellik süre zamanlama gecikme;

• Özellik: Hangi özellik yumuşasın? Örneğin background-color.
• Süre: 0.3s veya 300ms. Sıfırsa geçiş olmaz.
• Zamanlama: Değişimin hız eğrisi.
• Gecikme: Başlamadan önce beklenecek süre.

Birden çok özellik için virgül kullanılır: transition: transform 0.2s, opacity 0.3s;

Dördünün ayrı özellikleri de vardır: transition-property, transition-duration, transition-timing-function, transition-delay.

Nereye yazılır?

transition değerini :hover kuralına değil, temel kurala yazın. Temel kurala yazarsanız geçiş hem giderken hem dönerken çalışır. Yalnızca :hover içine yazarsanız fare ayrıldığında eski hâline bir anda döner.

<div class="kutu dogru">Temel kuralda (iki yön)</div>
<div class="kutu yanlis">Yalnızca :hover içinde (tek yön)</div>

.kutu {
  padding: 16px;
  margin-bottom: 8px;
  background-color: khaki;
}

.dogru {
  transition: background-color 0.6s;
}

.dogru:hover {
  background-color: crimson;
}

.yanlis:hover {
  background-color: crimson;
  transition: background-color 0.6s;
}

Zamanlama işlevleri

Değişimin zamana göre nasıl ilerleyeceğini belirler:

• ease Varsayılan. Hızlı başlar, yavaş biter.
• linear Sabit hız.
• ease-in Yavaş başlar.
• ease-out Yavaş biter. Ekrana giren elemanlar için doğal görünür.
• ease-in-out Yavaş başlar, yavaş biter.

Farenizi kutunun üzerine getirin ve çubukların hızını karşılaştırın:

<div class="alan">
  <div class="cubuk" style="transition-timing-function: linear;">linear</div>
  <div class="cubuk" style="transition-timing-function: ease;">ease</div>
  <div class="cubuk" style="transition-timing-function: ease-in;">ease-in</div>
  <div class="cubuk" style="transition-timing-function: ease-out;">ease-out</div>
</div>

.alan {
  padding: 8px;
  background-color: whitesmoke;
}

.cubuk {
  width: 90px;
  margin-bottom: 4px;
  padding: 4px;
  background-color: lightblue;
  transition-property: margin-left;
  transition-duration: 1.2s;
}

.alan:hover .cubuk {
  margin-left: calc(100% - 100px);
}

Örnekte .alan:hover .cubuk seçicisi, dıştaki kutunun durumuna göre içteki elemanları değiştirir.

Hangi özellikler kullanılmalı?

Her özellik geçiş yapamaz. Bir başlangıç ile bitiş arasında ara değer hesaplanabilmesi gerekir. Renkler, boyutlar ve saydamlık yumuşatılabilir, ama display: none gibi değerler normalde anlık değişir. height: auto da hesaplanamaz.

Geçiş yapabilenler arasında da fark vardır. width, height, margin gibi özellikler değiştiğinde tarayıcı sayfanın yerleşimini yeniden hesaplar ve küçük cihazlarda takılma görülebilir.

Akıcılık için en iyi iki özellik şunlardır:

• transform ile taşımak, büyütmek, döndürmek
• opacity ile soldurmak

<div class="kart">Üzerime gelin</div>

.kart {
  width: 180px;
  padding: 24px;
  margin: 16px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.kart:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

Doğru süreyi seçmek

Arayüz geçişleri kısa olmalıdır. Düğme ve bağlantılar için 150 ile 300 milisaniye arası iyi bir başlangıçtır. Bir geçişi fark edip beklemek zorunda kalıyorsanız çok uzundur.

Yaptığınız :hover geçişini klavye kullananlara da verin: .dugme:hover, .dugme:focus-visible

<style>
  .dugme {
    background-color: teal;
    transition: background-color 0.2s;
  }

  .dugme:hover {
    background-color: crimson;
  }
</style>

<button class="dugme">Gönder</button>

<style>
  .kart {
    transition: transform 0.2s ease-out;
  }

  .kart:hover {
    transform: translateY(-6px);
  }
</style>

<div class="kart">Kart</div>

Bu derste öğrendikleriniz

• transition özellik, süre, zamanlama ve gecikme alır ve temel kurala yazılır.
• ease-out ekrana girişlerde doğal görünür.
• transform ve opacity en akıcı özelliklerdir, transition: all kullanılmaz.
• Arayüz geçişleri 150 ile 300 milisaniye arasında kısa tutulur.