Mikro Animasyon Nedir: Temel Mekanik

Mikro animasyonlar tek amaca hizmet eden görsel geri bildirimlerdir. Durum değişikliği bildirir. Kullanıcı eylemini onaylar. Dikkat yönlendirir. Modern web standartlarında lüks değil, temel kullanılabilirlik gereksinimidir.

Adım 1: Tetikleyici ve Geri Bildirim Noktalarını Belirleyin

Her etkileşim 4 parçadan oluşur: Tetikleyici (Trigger), Kural (Rule), Geri Bildirim (Feedback), Döngü/Mod (Loops/Modes).

Buton Durumları: Hover, active, focus, disabled geçişleri.
Form Doğrulama: Hatalı alanda anlık titreme (shake), geçerli alanda yeşil onay ikonu belirmesi.
Yükleme Göstergeleri: Tam sayfa loader yerine buton içi skeleton veya spinner kullanımı.
Navigasyon: Menü açılışlarında layout kayması yaratmayan transform geçişleri.

Adım 2: Sadece GPU Dostu Özellikleri Hareket Ettirin

Tasarımda performansı korumak için tarayıcı render pipeline bilinmeli. width, height, top, left, margin tetikleyicileri layout ve repaint başlatır. FPS düşer, pil tüketir.

Kural: Yalnızca transform ve opacity değiştirin. Bu özellikler Composite aşamasında GPU üzerinde çalışır. 60 FPS garantiler.

/* Kötü: Reflow tetikler */
.btn:hover {
  top: -2px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* İyi: GPU dostu */
.btn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}

Adım 3: Süre ve Hız Eğrilerini (Easing) Doğru Ayarlayın

Doğru süre seçimi etkileşimi doğal hissettirir. Yanlış süre kullanıcıyı bekletir veya fark edilmez.

Mikro Etkileşim Süresi: 150ms - 300ms arası idealdir. 100ms altı fark edilmez, 400ms üzeri yavaş hissettirir.
Doğrusal (Linear) Kullanmayın: Doğada hareket doğrusal değildir. ease-out giriş animasyonları için, ease-in-out iki yönlü durumlar için standarttır.
Cubic-Bezier: Doğal yaylanma hissi için cubic-bezier(0.34, 1.56, 0.64, 1) gibi hafif esneme değerleri kullanın.

Adım 4: Erişilebilirlik (A11y) ve prefers-reduced-motion Desteği

Vestibüler bozukluğu olan kullanıcılar için hareket kısıtlanmalıdır. Her dijital ajans projesinde zorunlu standarttır.

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

Sektör Trendleri: 2024 ve Sonrası

Modern web trendlerinde öne çıkan mikro etkileşim kalıpları:

Scroll-Driven Animations: JS kütüphanesi olmadan native CSS animation-timeline: scroll() kullanımı.
Morphing Icons: Hamburger menüden kapatma (X) ikonuna SVG path animasyonu ile akıcı geçiş.
Haptic-like Visual Feedback: Tıklama anında mikroskobik ölçek küçülmesi (transform: scale(0.97)) ile dokunma hissi üretme.

Özet Kontrol Listesi

Gereksiz animasyon yok; her hareket bir amaca hizmet eder.
Layout/Paint tetikleyen CSS property kullanılmaz.
Süre 300ms sınırını aşmaz.
prefers-reduced-motion tanımlıdır.