CSS Animasyonları: Keyframes, Transition ve Transform

CSS animasyonları, web sayfalarına JavaScript kullanmadan hareket, geçiş ve görsel efektler eklemenizi sağlar. Doğru kullanıldığında kullanıcı deneyimini zenginleştirir, etkileşimlere geri bildirim sağlar ve arayüzü daha canlı hale getirir. Bu rehberde transition, keyframes ve transform kavramlarını derinlemesine inceleyeceğiz.

CSS Transition (Geçiş)

Transition, bir CSS özelliğinin bir değerden diğerine yumuşak bir şekilde geçmesini sağlar. Genellikle :hover, :focus veya JavaScript ile tetiklenen durum değişikliklerinde kullanılır.

Temel Söz Dizimi

/* Kısayol */
transition: property duration timing-function delay;

/* Örnek */
.button {
  background-color: #3b82f6;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #1d4ed8;
}

Transition bileşenleri:

• transition-property: Hangi CSS özelliğinin geçiş yapacağını belirler (all, opacity, transform vb.)
• transition-duration: Geçişin süresi (0.3s, 200ms)
• transition-timing-function: Hız eğrisi (ease, linear, ease-in-out, cubic-bezier())
• transition-delay: Geçişin başlamadan önceki bekleme süresi

CSS Transform

Transform, bir elemanı döndürme, ölçekleme, kaydırma veya eğme gibi geometrik dönüşümler uygulamanızı sağlar. Transform tek başına animasyon oluşturmaz; transition veya keyframes ile birleştirildiğinde anlam kazanır.

Temel Transform Fonksiyonları

/* Kaydırma */
transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, -20px);

/* Ölçekleme */
transform: scale(1.2);
transform: scaleX(0.5);

/* Döndürme */
transform: rotate(45deg);
transform: rotateX(180deg); /* 3D */

/* Eğme */
transform: skew(10deg, 5deg);

/* Birden fazla transform */
transform: translateX(50px) rotate(45deg) scale(1.1);

Önemli: Birden fazla transform uygulamak istediğinizde hepsini tek bir transform özelliğinde yazmalısınız. Ayrı satırlarda yazarsanız sonraki öncekini ezecektir.

CSS Keyframes Animasyonları

Transition yalnızca A noktasından B noktasına geçiş sağlarken, @keyframes ile çok adımlı, tekrarlayan ve daha karmaşık animasyonlar oluşturabilirsiniz.

Keyframes Tanımlama

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Yüzde ile çoklu adım */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

Animasyonu Uygulama

.card {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;

  /* Kısayol */
  animation: fadeIn 0.5s ease-out forwards;
}

Önemli animasyon özellikleri:

• animation-iteration-count: Animasyonun kaç kez tekrarlanacağı (1, 3, infinite)
• animation-direction: normal, reverse, alternate (ileri-geri)
• animation-fill-mode: Animasyon bitmeden önce ve sonra elemanın durumu (forwards son kareyi korur)
• animation-play-state: running veya paused — JavaScript ile kontrol için kullanışlıdır

Timing Functions (Zamanlama Fonksiyonları)

Zamanlama fonksiyonları animasyonun hız eğrisini belirler ve hareketin doğal görünmesini sağlar:

• linear — Sabit hız, mekanik bir his verir
• ease — Yavaş başla, hızlan, yavaşla (varsayılan)
• ease-in — Yavaş başla, hızlanarak bitir
• ease-out — Hızlı başla, yavaşlayarak bitir
• ease-in-out — Her iki uçta yavaşla
• cubic-bezier(x1, y1, x2, y2) — Özel eğri tanımlama

/* Doğal bir "bounce" efekti */
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

Performans İpuçları

Tüm CSS özellikleri aynı performansla animasyon yapmaz. Akıcı 60 FPS animasyonlar için şu kurallara uyun:

• Yalnızca transform ve opacity animasyonlarını tercih edin. Bu özellikler GPU hızlandırmalıdır ve layout/paint tetiklemez.
• width, height, top, left gibi özellikleri animasyondan kaçının. Bunlar layout yeniden hesaplaması (reflow) tetikler ve performansı düşürür.
• will-change özelliğini kullanın: Tarayıcıya hangi özelliğin değişeceğini önceden bildirerek optimizasyon yapmasını sağlayın.

.animated-element {
  will-change: transform, opacity;
}

/* Animasyon bittikten sonra kaldırın */
.animated-element.done {
  will-change: auto;
}

Uyarı: will-change aşırı kullanılmamalıdır — her eleman için belirtmek, bellek tüketimini artırır ve tam tersi etkiye neden olabilir.

Erişilebilirlik: Hareket Duyarlılığı

Bazı kullanıcılar hareket hassasiyetine sahiptir. prefers-reduced-motion medya sorgusu ile animasyonları devre dışı bırakabilirsiniz:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}