Tailwind CSS'te bir durum değişikliğini (örneğin fareyle üzerine gelince renk değişimini) yumuşak bir geçişe çevirmek için öğeye transition sınıfını eklersiniz; süreyi duration-300, hız eğrisini ease-in-out, gecikmeyi delay-150 gibi sınıflarla ayarlarsınız. Yalnızca belirli özellikleri geçirmek için transition-colors, transition-opacity, transition-transform gibi daraltılmış sınıflar vardır. Varsayılan süre 150ms, varsayılan eğri cubic-bezier(0.4, 0, 0.2, 1) değeridir.

Bu yazıda geçiş sınıflarının hangi özellikleri kapsadığını, süre ve eğri sınıflarının neden bir CSS değişkeni üzerinden çalıştığını, varsayılanları değiştirmeyi, hareket azaltma tercihine saygı göstermeyi ve v4'e özgü iki tuzağı anlatıyoruz. Gösterilen tüm CSS, Tailwind CSS v4.3.5 standalone CLI ile derlendi. Serinin geri kalanı için Tailwind öğrenme rehberine bakabilirsiniz.

İlk geçiş: hover ile renk ve hareket

Resmî belgedeki temel örneğe benzer bir buton, üzerine gelindiğinde biraz yukarı kalkıp büyüyor ve arka plan rengini değiştiriyor. Geçiş sınıfları olmadan bu değişimler anında olurdu.

html
<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500">
  Değişiklikleri kaydet
</button>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .delay-150 {
    transition-delay: 150ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  @media (hover: hover) {
    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:bg-indigo-500:hover {
      background-color: var(--color-indigo-500);
    }
  }
}

Fareyle üzerine gelindiğinde 150ms beklenir, ardından arka plan rengi, translate ve scale değerleri 300ms içinde ease-in-out eğrisiyle değişir. @layer theme bölümünde --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1), --default-transition-duration: 150ms ve --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) değerleri yer alır. Kök yazı boyutu 16px iken -translate-y-1 4px yukarı kaydırmaya karşılık gelir. Hover'ın neden @media (hover: hover) içine yerleştiği hover, focus ve active yazısında, translate ve scale sınıfları ise transform yazısında anlatılıyor.

Hangi sınıf hangi özellikleri geçirir?

Hangi sınıf hangi özellikleri geçirir? transition, transition-all, transition-colors, transition-opacity

transition geniş bir özellik listesini kapsar ama all değildir. Daraltılmış sınıflar yalnızca kendi grubunu geçirir. Aşağıdaki liste v4.3.5 derlemesindeki transition-property değerlerinden alındı.

Sınıftransition-property
transitioncolor, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events
transition-allall
transition-colorscolor, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to
transition-opacityopacity
transition-shadowbox-shadow
transition-transformtransform, translate, scale, rotate
transition-nonenone

Listede dikkat çeken iki şey var. Birincisi, gradyan renk değişkenleri (--tw-gradient-from ve diğerleri) renk geçişine dahildir; bu sayede gradyanlı bir butonun renkleri de yumuşakça değişebilir. İkincisi, width, height ya da padding gibi boyut özellikleri hiçbir hazır sınıfta yoktur; bunları geçirmek için ya transition-all ya da keyfi bir liste kullanmanız gerekir. Gradyanlı geçiş örneği gradyan yazısında bulunuyor.

html
<a class="text-sky-600 transition-colors hover:text-sky-800">Bağlantı</a>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .text-sky-600 {
    color: var(--color-sky-600);
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .hover\:text-sky-800:hover {
      color: var(--color-sky-800);
    }
  }
}

Bir bağlantının yalnızca rengi değişiyorsa transition-colors, değişmeyen özellikleri de izlemeye almaktan daha dar ve niyeti daha açık bir seçimdir.

Süre, eğri ve gecikme sınıfları

duration-* ve delay-* sınıflarında sayı doğrudan milisaniyedir: duration-700 700ms, delay-300 300ms. Belge bu sınıfları duration-<sayı> ve delay-<sayı> biçiminde tanımlar, yani sabit bir liste yoktur; duration-250 gibi bir değer de çalışır. Eğri sınıfları dört tanedir: ease-linear, ease-in, ease-out ve ease-in-out.

SınıfDeğer (v4.3.5 tema)
ease-linearlinear
ease-incubic-bezier(0.4, 0, 1, 1)
ease-outcubic-bezier(0, 0, 0.2, 1)
ease-in-outcubic-bezier(0.4, 0, 0.2, 1)
html
<div class="duration-700 ease-out delay-300 ease-[cubic-bezier(0.95,0.05,0.795,0.035)] duration-[1s,15s]"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .delay-300 {
    transition-delay: 300ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .duration-\[1s\,15s\] {
    --tw-duration: 1s,15s;
    transition-duration: 1s,15s;
  }
  .ease-\[cubic-bezier\(0\.95\,0\.05\,0\.795\,0\.035\)\] {
    --tw-ease: cubic-bezier(0.95,0.05,0.795,0.035);
    transition-timing-function: cubic-bezier(0.95,0.05,0.795,0.035);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

Bu örnek bilerek aynı öğede iki süre ve iki eğri sınıfı içeriyor; gerçek bir projede bunlardan yalnızca birini seçersiniz. Keyfi değerde virgülle birden fazla değer yazabilirsiniz (duration-[1s,15s]); CLI bu listeyi olduğu gibi hem transition-duration özelliğine hem de --tw-duration değişkenine aktarır. Köşeli parantez kuralları arbitrary values yazısında anlatılıyor.

Neden --tw-duration ve --tw-ease değişkenleri var?

Neden --tw-duration ve --tw-ease değişkenleri var?

Derlenen .transition kuralı süreyi doğrudan 150ms olarak değil, var(--tw-duration, var(--default-transition-duration)) olarak yazar. duration-* sınıfları da hem transition-duration özelliğini hem de --tw-duration değişkenini ayarlar. Bu ikili kurgu, geçişi yalnızca bir breakpoint ya da durumda açtığınızda ortaya çıkan bir sıralama sorununu çözer.

html
<div class="duration-300 ease-out md:transition"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  @media (width >= 48rem) {
    .md\:transition {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
}

md:transition kuralı CSS dosyasında duration-300 kuralından sonra gelir ve transition-duration özelliğini yeniden yazar. Bu satır sabit bir 150ms olsaydı, orta ve büyük ekranlarda sizin seçtiğiniz 300ms ezilirdi. Değer --tw-duration değişkeninden okunduğu ve bu değişken duration-300 ile 300ms'ye ayarlandığı için sonuç yine 300ms olur. Aynı mantık --tw-ease ile eğri için de geçerlidir. Kısacası süre ve eğri sınıflarını geçiş sınıfına hangi varyant verilmiş olursa olsun varyantsız yazabilirsiniz. Resmî belgedeki özet tablo bu değişkeni göstermez, ancak derlenen CSS'te açıkça görülür.

Varsayılan süreyi ve eğriyi değiştirmek

Projedeki tüm geçişlerin varsayılan süresini değiştirmek için her öğeye duration-* yazmak yerine iki tema değişkenini ezebilirsiniz. Bu değişkenler v4.3.5 tema dosyasında --default-transition-duration ve --default-transition-timing-function adlarıyla yer alır.

css
@import "tailwindcss";

@theme {
  --default-transition-duration: 250ms;
  --default-transition-timing-function: linear;
}
html
<div class="transition"></div>

v4.3.5 ile derlenen CSS (tema ve geçiş kuralı):

css
@layer theme {
  :root, :host {
    /* (kısaltıldı) */
    --default-transition-duration: 250ms;
    --default-transition-timing-function: linear;
  }
}
@layer utilities {
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

Geçiş kuralı değişmez, yalnızca okuduğu varsayılan değerler değişir. Kendi eğrinizi bir sınıf olarak eklemek için de --ease-* ad alanını kullanırsınız; belgedeki örnek --ease-in-expo adlı bir eğri tanımlar ve sonrasında ease-in-expo sınıfı kullanılabilir.

css
@theme {
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
css
@layer utilities {
  /* (kısaltıldı) */
  .ease-in-expo {
    --tw-ease: var(--ease-in-expo);
    transition-timing-function: var(--ease-in-expo);
  }
}

Tema değişkenlerinin genel kuralları @theme direktifi yazısında anlatılıyor.

Hareket azaltma tercihi: motion-safe ve motion-reduce

Gereksiz hareketin azaltılmasını isteyen kullanıcılar için iki varyant vardır; ikisi de prefers-reduced-motion medya sorgusuna dayanır. motion-reduce: yalnızca kullanıcı azaltma istediğinde, motion-safe: ise yalnızca böyle bir istek olmadığında uygulanır. Belge, motion-reduce ile çok sayıda stili geri almak gerektiğinde motion-safe kullanmanın daha az kod gerektirdiğini belirtir.

html
<button class="motion-safe:transition motion-safe:hover:-translate-y-0.5"></button>
<button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0"></button>

v4.3.5 ile derlenen CSS (medya sorguları):

css
@layer utilities {
  /* (kısaltıldı) */
  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:transition {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    @media (hover: hover) {
      .motion-safe\:hover\:-translate-y-0\.5:hover {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-none {
      transition-property: none;
    }
    @media (hover: hover) {
      .motion-reduce\:hover\:translate-y-0:hover {
        --tw-translate-y: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
}

İki buton aynı sonucu hedefler. İlki hareketi yalnızca güvenli olduğunda ekler; ikincisi hareketi herkese ekleyip azaltma isteyenler için iki ayrı sınıfla geri alır. Varyantların iç içe geçtiği yere dikkat edin: motion-safe:hover: yazımı önce hareket sorgusunu, onun içinde hover sorgusunu üretir. Erişilebilirlikle ilgili diğer varyantlar erişilebilirlik yazısında anlatılıyor.

v4'e özgü iki tuzak

v4'e özgü iki tuzak: transform yazan özel listeler artık scale ve translate'i geçirmez, Odakta eklenen outline rengi geçişle belirir

transform yazan özel listeler artık scale ve translate'i geçirmez

v4'te scale-*, rotate-* ve translate-* sınıfları CSS'in ayrı scale, rotate ve translate özelliklerini kullanır; yukarıdaki derlemelerde de scale: var(--tw-scale-x) var(--tw-scale-y) satırını gördünüz. Resmî yükseltme rehberi, özel bir listede transform yazmanın (transition-[opacity,transform]) bu sınıfları artık geçirmediğini, listeye özelliklerin kendisini yazmak gerektiğini belirtir.

html
<div class="transition-[height] transition-[opacity,scale] hover:scale-150"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .transition-\[height\] {
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,scale\] {
    transition-property: opacity,scale;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .hover\:scale-150:hover {
      --tw-scale-x: 150%;
      --tw-scale-y: 150%;
      --tw-scale-z: 150%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}

Keyfi listeler de süre ve eğriyi aynı değişkenlerden okur, yani duration-* ve ease-* sınıflarıyla birlikte çalışır. Örnekteki iki keyfi sınıf aynı özelliği yazdığı için gerçek bir projede yalnızca birini kullanırsınız; burada iki biçimi birlikte göstermek için yan yana yazıldı.

Odakta eklenen outline rengi geçişle belirir

Yükseltme rehberine göre transition ve transition-colors artık outline-color özelliğini de içerir. Outline rengini yalnızca bir durumda verirseniz (hover:outline-cyan-500), geçiş sırasında renk varsayılandan hedef renge kayar. Rehberin önerisi rengi koşulsuz vermektir:

html
<button class="outline-cyan-500 transition hover:outline-2"></button>

v4.3.5 ile derlenen CSS (outline kuralları):

css
@layer utilities {
  /* (kısaltıldı) */
  .outline-cyan-500 {
    outline-color: var(--color-cyan-500);
  }
  @media (hover: hover) {
    .hover\:outline-2:hover {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
}

Renk her durumda camgöbeği olduğu için üzerine gelindiğinde yalnızca genişlik değişir. Outline ve ring sınıflarının farkı shadow ve ring yazısında anlatılıyor.

Uygulamalı örnek: bağlantıya gelince beliren ok

Geçişler yalnızca öğenin kendi durumuna bağlı olmak zorunda değildir. Bir üst öğeye group sınıfı verip çocukta group-hover: varyantını kullandığınızda, bağlantının herhangi bir yerine gelindiğinde içteki ok hem görünür olur hem de biraz sağa kayar. Okun kendisine transition eklemek bu iki değişimi yumuşatır.

html
<a href="/web-hosting" class="group flex items-center gap-2">
  Paketleri inceleyin
  <span class="opacity-0 transition duration-200 ease-out group-hover:translate-x-1 group-hover:opacity-100">&gt;</span>
</a>

v4.3.5 ile derlenen CSS (geçiş ve group kuralları):

css
@layer utilities {
  /* (kısaltıldı) */
  .opacity-0 {
    opacity: 0%;
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  @media (hover: hover) {
    :is(:where(.group):hover .group-hover\:translate-x-1) {
      --tw-translate-x: var(--spacing);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    :is(:where(.group):hover .group-hover\:opacity-100) {
      opacity: 100%;
    }
  }
}

Geçiş sınıfları değişen öğeye, yani oka yazılır; üst öğeye transition eklemek okun değişimini yumuşatmaz, çünkü değişen özellik okun kendisine aittir. transition listesinde hem opacity hem de translate bulunduğu için iki değişim de 200ms içinde ease-out eğrisiyle olur. translate-x-1, 16px kökte 4px'lik bir kaymaya karşılık gelir. group ve peer varyantlarının tüm biçimleri group ve peer yazısında anlatılıyor.

Geçişi ekran boyutuna göre açıp kapatmak da mümkündür. Belgedeki örnekte transition-none md:transition-all yazımı küçük ekranlarda geçişi kapatır, orta ve büyük ekranlarda tüm özellikleri geçirir. Bu tür breakpoint kullanımının mantığı responsive tasarım yazısında ele alınıyor.

Sık yapılan hatalar

  • Boyut değişimini transition ile beklemek: transition listesinde height ya da width yoktur; transition-[height] ya da transition-all gerekir.
  • transition-[transform] yazmak: v4'te scale-* ve translate-* ayrı özelliklerdir; listeye scale ya da translate yazın.
  • Hareketi herkese zorlamak: Büyük kaydırma ve ölçekleme efektlerini motion-safe: ile sınırlamak, hareket azaltma tercihini kullanan ziyaretçilere saygı gösterir.
  • delay sınıfının varyantla davranışı: delay-* bir değişken kullanmaz, doğrudan transition-delay yazar. Gecikmeyi yalnızca bir durumda istiyorsanız varyantı gecikme sınıfının kendisine ekleyin.

Geçiş yerine sürekli tekrar eden bir hareket gerekiyorsa animate sınıfları yazısına bakın.

Sık Sorulan Sorular

Tailwind transition varsayılan süresi nedir?

v4.3.5'te --default-transition-duration değeri 150ms, --default-transition-timing-function değeri cubic-bezier(0.4, 0, 0.2, 1) olarak tanımlıdır. duration-* ya da ease-* yazmadığınızda bu değerler kullanılır.

transition ile transition-all arasındaki fark nedir?

transition, renkler, opaklık, gölge, dönüşüm ve filtre gibi belirli bir özellik listesini geçirir. transition-all ise all yazar ve boyutlar dahil değişen her animasyonlanabilir özelliği geçirir.

duration-250 gibi listede olmayan bir değer çalışır mı?

Evet. Belge duration-<sayı> biçimini tanımlar ve sayı milisaniye olarak yazılır. Saniye ya da birden fazla değer için köşeli parantez kullanın: duration-[1.5s].

transition sınıfını hover: ile mi yazmalıyım?

Genellikle hayır. hover:transition yazdığınızda CLI geçiş kuralını @media (hover: hover) ve :hover koşulunun içine koyar; geçiş yalnızca öğe üzerindeyken tanımlı olur. Fare öğeden ayrıldığında geçiş kuralı da ortadan kalktığı için eski duruma dönüş yumuşak olmaz. Geçiş sınıfını varyantsız yazıp yalnızca değişen değeri, örneğin rengi, hover: ile vermek iki yönde de yumuşak bir sonuç verir.

Hareket azaltma tercihini nasıl test ederim?

Resmî belge, tarayıcı geliştirici araçlarında prefers-reduced-motion: reduce ayarını taklit ederek denemeyi önerir. Bu sırada motion-reduce: varyantlı sınıflar devreye girer.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · Animate ve özel animasyon · Transform: scale, rotate, translate · Hover, focus ve active · Erişilebilirlik · Tailwind v4 yenilikleri