Çalıştırılabilir CSS Dokümanları: CSS transition

Q: transition kısa yazımında değerlerin sırası nedir?

transition: property duration timing-function delay;, örneğin transition: opacity 0.3s ease-in 0.1s;. Tek katı kural, ilk süre değerinin duration, ikincisinin delay olmasıdır. Birden fazla transition'ı virgülle ayır.

Q: CSS transition'ım neden çalışmıyor?

Yaygın nedenler: transition yalnızca :hover kuralındadır (bu yüzden girişte canlanır ve birden geri döner), özellik canlandırılamaz (display ya da auto'ya giden height), sürenin birimi yoktur (0.3s yerine 0.3) ya da değer, element sayfaya eklendiği anda değişir.

Q: height: auto'ya transition yapılabilir mi?

Her tarayıcıda düz bir height transition'ıyla hayır: auto'ya ara değer hesaplamak, henüz her yerde desteklenmeyen daha yeni interpolate-size özelliğini gerektirir. Yaygın geçici çözümler, bir grid sarmalayıcıda grid-template-rows'u 0fr'dan 1fr'a canlandırmak ya da max-height'ı içerikten büyük bir değere canlandırmaktır.

Tek örnekte bir transition

Bir transition tarayıcıya şunu söyler: bu özellik değiştiğinde birden geçmek yerine onu bu kadar sürede canlandır. Onu yalnızca :hover'a değil, elementin normal kuralına koy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

İlk butonun üzerine gel: rengi 0,4 saniyede yeşile döner ve 4px yükselir; imleci uzaklaştırmak aynı transition'ı geri oynatır. İkinci butonda transition: none var ve anında geçiyor. Klavye kullanıcıları aynı etkiyi :focus-visible ile alır.

transition kısa yazımı

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Uzun yazım	Ne ayarlar	Varsayılan
`transition-property`	hangi özelliklerin canlanacağı (`all` ya da bir liste)	`all`
`transition-duration`	ne kadar süreceği, `s` ya da `ms` cinsinden	`0s`
`transition-timing-function`	hız eğrisi	`ease`
`transition-delay`	başlamadan önceki bekleme (negatif olabilir)	`0s`

Sürenin varsayılanı 0s'dir; bir süre ayarlayana kadar hiçbir şeyin canlanmamasının nedeni budur. Kısa yazımda ilk süre her zaman duration, ikincisi delay'dir. Özellik başına farklı ayarlar için onları virgülle ayır:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Zamanlama fonksiyonları yan yana

Zamanlama fonksiyonu, transition sırasında hızın nasıl değişeceğine karar verir. Play'e bas, yedi çubuğun hepsi aynı 1,5 saniyede aynı mesafeyi gider:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Zamanlama fonksiyonu	Hissettirdiği
`linear`	sabit hız, mekanik
`ease` (varsayılan)	hızlı başlangıç, yumuşak duruş
`ease-in`	yavaş başlangıç, hızlı bitiş: ayrılan şeyler için iyi
`ease-out`	hızlı başlangıç, yavaş bitiş: gelen şeyler için iyi
`ease-in-out`	iki uçta da yavaş
`cubic-bezier(x1, y1, x2, y2)`	kendi eğrin; 1'in üstündeki bir y hedefi aşar ve geri oturur
`steps(n)`	ara kareler olmadan n eşit adımda atlar

Hover efektleri ve menüler için 150ms ile 300ms arası bir süreyle ease-out hızlı tepki veriyor hissi verir.

Neyin transition'ı yapılabilir

Arada değerleri olan özelliklerin transition'ı yapılabilir: renkler, uzunluklar (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. display ya da font-family gibi anahtar kelimeler arasında atlayan özellikler anında geçer.

İnsanların en çok takıldığı height: auto'dur: height: 0'dan height: auto'ya açılan bir panel varsayılan olarak canlanmaz, çünkü tarayıcı 0 ile "auto" arasındaki değerleri hesaplamaz. Güvenilir bir geçici çözüm, tek satırı 0fr'dan 1fr'a giden bir grid sarmalayıcıdır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded, ekran okuyucu kullanıcılarına panelin açık olup olmadığını söyler; animasyon tek başına bunu söylemez.

Bir transition bittiğinde kod çalıştırmak

transitionend olayı bir transition bittiğinde, her özellik için bir kez tetiklenir. Hareketten sonra bir şey yapmak için, örneğin odağı taşımak ya da bir elementi kaldırmak için kullan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Azaltılmış harekete saygı göster

Bazı insanlar ekrandaki hareket başlarını döndürdüğü ya da dikkatlerini dağıttığı için sistem ayarlarında "hareketi azalt"ı açar. Renk ve opaklık geçişlerini tut, büyük hareketleri bir medya sorgusuyla kaldır:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Transition'ları akıcı tut

transform ve opacity canlandırması en ucuz özelliklerdir: tarayıcı bir elementi düzeni yeniden hesaplamadan taşıyıp soldurabilir. width, height, top ya da margin'e transition vermek tarayıcının sayfayı her karede yeniden yerleştirmesine neden olur ve bu yavaş telefonlarda takılabilir. Bir şeyi taşımak için left ya da margin yerine transform: translate()'i tercih et. Fonksiyonları transform sayfası anlatıyor.

Sık yapılan hatalar

transition yalnızca :hover kuralında. Efekt girişte canlanır ama hover bittiğinde birden geri döner. transition'ı temel kurala koy.
Birimsiz bir süre. transition: opacity 300 geçersizdir. 300ms ya da 0.3s yaz.
transition: all. Değişen her özelliği, canlandırmak istemediklerin dahil canlandırır ve düzen değişikliklerini ağırlaştırabilir. Özellikleri listele.
display: none'ın solmasını beklemek. display anında geçer. Bunun yerine opacity'yi soldur (ve solma bitince visibility: hidden ayarla).
height: auto'ya transition vermek. Atlar. Yukarıdaki grid-template-rows tekniğini kullan.
Küçük etkileşimlerde uzun süreler. Bir buton ya da menüde yaklaşık 400ms'nin üzerindeki her şey yavaş hissettirir.

Sıkça Sorulan Sorular

CSS transition nasıl çalışır?

Bir elementte hangi özelliklerin ne kadar sürede canlanacağını bildirirsin, örneğin transition: background-color 0.3s ease;. O özelliğin değeri değiştiğinde (:hover, bir class ya da JavaScript ile) tarayıcı birden geçmek yerine eski değerden yenisine canlandırır.

transition kısa yazımında değerlerin sırası nedir?

transition: property duration timing-function delay;, örneğin transition: opacity 0.3s ease-in 0.1s;. Tek katı kural, ilk süre değerinin duration, ikincisinin delay olmasıdır. Birden fazla transition'ı virgülle ayır.

CSS transition'ım neden çalışmıyor?

Yaygın nedenler: transition yalnızca :hover kuralındadır (bu yüzden girişte canlanır ve birden geri döner), özellik canlandırılamaz (display ya da auto'ya giden height), sürenin birimi yoktur (0.3s yerine 0.3) ya da değer, element sayfaya eklendiği anda değişir.

height: auto'ya transition yapılabilir mi?

Her tarayıcıda düz bir height transition'ıyla hayır: auto'ya ara değer hesaplamak, henüz her yerde desteklenmeyen daha yeni interpolate-size özelliğini gerektirir. Yaygın geçici çözümler, bir grid sarmalayıcıda grid-template-rows'u 0fr'dan 1fr'a canlandırmak ya da max-height'ı içerikten büyük bir değere canlandırmaktır.

CSS'te transition ile animation arasındaki fark nedir?

Bir transition, bir özellik değiştiğinde iki değer arasında bir kez çalışır. Bir animation ise @keyframes kullanır, birçok adımı olabilir, sayfa yüklendiğinde kendiliğinden başlar ve tekrar edebilir ya da döngüye girebilir.

İlgili kavramlar