1. Mikro Animasyon Nedir ve Neden Gereklidir?

Mikro animasyon, tek bir amaca hizmet eden küçük, işlevsel görsel geri bildirimdir. Kullanıcı eylemini onaylar, sistem durumunu bildirir, dikkat yönlendirir. Dijital strateji içinde dönüşüm oranını doğrudan etkiler.

Kural: Animasyon süsü değil, durumu temsil etmeli. 200ms ile 400ms aralığında kalmalı.

2. Performans Odaklı Animasyon Prensipleri

Tasarım trendleri görsel zenginlik ister; tarayıcı motoru hız ister. Layout (Reflow) ve Paint tetikleyen özelliklerden kaçının. Sadece GPU tarafından işlenen Composite özelliklerini kullanın:

Kullanın: transform (translate, scale, rotate) ve opacity.
Kaçının: width, height, top, left, margin, padding.

3. Adım Adım Mikro Animasyon Entegrasyonu

Adım 1: Eylem Geri Bildirimi (Buton Durumları)

Kullanıcı tıkladığında işlemin başladığını gösteren CSS transition tanımı:

button.cta {
  transition: transform 150ms ease, background-color 150ms ease;
}
button.cta:active {
  transform: scale(0.96);
}

Adım 2: Durum Bildirimi (İskelet Yükleyiciler / Skeleton)

Spinner yerine içerik yapısını taklit eden CSS shimmer animasyonu kullanın. Sayfa yükleme algısını hızlandırır.

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Adım 3: Form Validasyon Geri Bildirimi

Hatalı girişlerde tüm sayfayı yenilemeyin. Giriş alanına mikro sarsıntı (shake) efekti verin:

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.input-error {
  animation: shake 300ms ease-in-out;
  border-color: #e53e3e;
}

4. Erişilebilirlik (A11y) Zorunluluğu

Hareket hassasiyeti olan kullanıcılar için animasyonları kapatın. CSS medya sorgusu ile native çözüm:

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

5. İnteraktif Tasarım Başarı Metrikleri

Tıklama Oranı (CTR): Vurgulanan butonlarda artış.
Form Terk Oranı: Anlık mikro geri bildirimle azalan hata ve form bırakma.
FID / INP Değerleri: JavaScript thread'ini tıkamayan hafif CSS animasyonlarıyla korunan Core Web Vitals skorları.