Tailwind CSS Animasyonlar: @keyframes ve Transition

Tailwind CSS Animasyonlar: @keyframes ve Transition

Web uygulamalarında animasyonlar, kullanıcı deneyimini zenginleştiren ve arayüzü daha canlı hale getiren kritik unsurlardır. Tailwind CSS, hem hazır animasyon utility'leri hem de custom @keyframes tanımlama imkanı sunarak CSS animasyonlarını hızlı ve verimli bir biçimde uygulamanızı sağlar. Bu rehberde Tailwind ile transition, transform ve keyframe animasyonlarını derinlemesine inceleyeceğiz.

1. Tailwind Transition Temelleri

Transition, bir CSS özelliğinin bir değerden diğerine yumuşak geçiş yapmasını sağlar. Tailwind, transition-* utility'leri ile bunu kolaylaştırır.

<!-- Temel Transition -->
<button class="bg-blue-500 hover:bg-blue-700
               text-white font-bold py-2 px-4 rounded
               transition-colors duration-300 ease-in-out">
  Hover Et
</button>

<!-- Çoklu Transition -->
<div class="transform hover:scale-105 hover:shadow-xl
            transition-all duration-500 ease-out
            bg-white rounded-lg p-6">
  Büyüyen Card
</div>

Transition Utility Sınıfları

2. Duration ve Timing Function

Animasyonun süresi ve hız eğrisi, kullanıcı deneyimini doğrudan etkiler. Tailwind bu konuda zengin seçenekler sunar.

<!-- Duration örnekleri -->
<div class="transition-all duration-75">Çok hızlı (75ms)</div>
<div class="transition-all duration-150">Hızlı (150ms)</div>
<div class="transition-all duration-300">Normal (300ms)</div>
<div class="transition-all duration-500">Yavaş (500ms)</div>
<div class="transition-all duration-1000">Çok yavaş (1s)</div>

<!-- Easing örnekleri -->
<div class="transition ease-linear duration-300">Lineer</div>
<div class="transition ease-in duration-300">Yavaş başla</div>
<div class="transition ease-out duration-300">Yavaş bitir</div>
<div class="transition ease-in-out duration-300">Yavaş başla/bitir</div>

3. Transform Utility'leri

Tailwind'in transform sınıfları, elementleri döndürme, ölçekleme, kaydırma ve eğme işlemleri için kullanılır.

<!-- Scale -->
<div class="hover:scale-110 transition-transform duration-300">
  Büyü
</div>

<!-- Rotate -->
<div class="hover:rotate-12 transition-transform duration-300">
  Döndür
</div>

<!-- Translate -->
<div class="hover:-translate-y-2 transition-transform duration-300">
  Yukarı Kaydir
</div>

<!-- Skew -->
<div class="hover:skew-x-6 transition-transform duration-300">
  Eğ
</div>

<!-- Birleşik Transform -->
<div class="hover:scale-105 hover:-translate-y-1 hover:rotate-1
            transition-transform duration-500 ease-out">
  Kombine Efekt
</div>

4. Tailwind Hazır Animasyonlar

Tailwind CSS, sıkça kullanılan animasyonları varsayılan olarak sunar. Bunlar animate-* sınıfları ile kullanılır.

<!-- Spin — Dönen yükleme ikonu -->
<svg class="animate-spin h-5 w-5 text-blue-500" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" stroke="currentColor"
          stroke-width="4" fill="none" opacity="0.25"></circle>
  <path fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>

<!-- Ping — Bildirim noktası -->
<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full
               rounded-full bg-red-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3
               bg-red-500"></span>
</span>

<!-- Pulse — İskelet yükleme -->
<div class="animate-pulse bg-gray-200 h-4 w-48 rounded"></div>

<!-- Bounce — Aşağı kaydır ikonu -->
<div class="animate-bounce text-2xl">&darr;</div>

5. Custom @keyframes Tanımlama

Tailwind'in varsayılan animasyonları yetmediğinde, kendi @keyframes animasyonlarınızı tanımlayabilirsiniz.

/* Tailwind v4 — CSS dosyasında */
@import "tailwindcss";

@theme {
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-slide-up: slide-up 0.6s ease-out;
  --animate-wiggle: wiggle 1s ease-in-out infinite;
  --animate-gradient: gradient-shift 3s ease infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

<!-- Custom animasyonları kullanma -->
<div class="animate-fade-in">Yumuşak Giriş</div>
<div class="animate-slide-up">Aşağıdan Gelme</div>
<div class="animate-wiggle">Sallanan Element</div>

6. Scroll-Triggered Animasyonlar

Tailwind v4 ile birlikte CSS scroll-driven animasyonlarını da destekleyebilirsiniz. Intersection Observer ile birleştirilerek scroll bazlı animasyonlar oluşturulabilir.

// JavaScript ile scroll-triggered class ekleme
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-fade-in');
      entry.target.classList.remove('opacity-0');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.scroll-animate').forEach(el => {
  el.classList.add('opacity-0');
  observer.observe(el);
});

<!-- Kullanım -->
<div class="scroll-animate transition-all duration-700">
  Bu element görünür olduğunda animasyon başlar
</div>

7. Animasyon Delay ve Stagger Efekti

Birden fazla elementi sırayla canlandırmak, etkileyici bir görsel efekt oluşturur.

<!-- Stagger efekti -->
<div class="space-y-4">
  <div class="animate-fade-in" style="animation-delay: 0ms">Birinci</div>
  <div class="animate-fade-in" style="animation-delay: 100ms">İkinci</div>
  <div class="animate-fade-in" style="animation-delay: 200ms">Üçüncü</div>
  <div class="animate-fade-in" style="animation-delay: 300ms">Dördüncü</div>
</div>

<!-- Tailwind arbitrary value ile delay -->
<div class="animate-fade-in [animation-delay:200ms]">
  Gecikmeli Animasyon
</div>

8. Reduced Motion Erişilebilirlik

Bazı kullanıcılar hareket hassasiyetine sahip olabilir. Tailwind'in motion-reduce ve motion-safe modifier'ları ile erişilebilir animasyonlar oluşturabilirsiniz.

<!-- Erişilebilir animasyon -->
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Hareket tercihine duyarlı animasyon
</div>

<!-- Transition için -->
<button class="motion-safe:transition-all motion-safe:duration-300
               motion-reduce:transition-none
               hover:scale-105 hover:bg-blue-700
               bg-blue-500 text-white px-4 py-2 rounded">
  Erişilebilir Buton
</button>

9. Pratik Örnekler

Skeleton Loading

<div class="space-y-4 p-6 max-w-sm">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-gray-300 h-12 w-12"></div>
    <div class="flex-1 space-y-3 py-1">
      <div class="h-3 bg-gray-300 rounded w-3/4"></div>
      <div class="h-3 bg-gray-300 rounded w-1/2"></div>
    </div>
  </div>
</div>

Hover Card Efekti

<div class="group cursor-pointer bg-white rounded-xl p-6
            shadow-md hover:shadow-2xl
            transition-all duration-500 ease-out
            hover:-translate-y-2">
  <h3 class="text-lg font-bold group-hover:text-blue-600
             transition-colors duration-300">
    Kart Başlığı
  </h3>
  <p class="text-gray-600 mt-2 group-hover:text-gray-800
            transition-colors duration-300">
    Kart açıklaması buraya gelir.
  </p>
  <span class="inline-block mt-4 text-blue-500
               group-hover:translate-x-2
               transition-transform duration-300">
    Devamını Oku &rarr;
  </span>
</div>

Sonuç

Tailwind CSS ile animasyonlar oluşturmak hem hızlı hem de bakımı kolaydır. Hazır animate-* sınıfları basit durumlar için yeterli olurken, @keyframes ve @theme ile istediğiniz karmaşıklıkta animasyonlar tanımlayabilirsiniz. Transition ve transform utility'leri hover, focus gibi etkileşimler için idealdir. Erişilebilirlik için motion-reduce modifier'ını unutmayın ve performans için will-change özelliğini dikkatli kullanın.

Kaynaklar

• Tailwind CSS Animation Docs
• Tailwind CSS Transition Docs
• MDN — @keyframes
• MDN — CSS Animasyonları Kullanma
• web.dev — Animasyon Rehberi