Hızlı Özet (TL;DR)
Kurumsal B2B sitelerinin ciddi ve profesyonel olması gerektiği doğrudur; ancak bu durum sitenin statik, ruhsuz ve tepkisiz olması anlamına gelmez. Buton geçişleri, kart gölgeleri, açılır menüler ve form odaklanmalarında kullanılan hafif mikro animasyonlar, kullanıcıya anında geri bildirim vererek arayüz güvenini pekiştirir. Ancak bu animasyonlar ağır JavaScript kütüphaneleriyle değil, doğrudan grafik kartı (GPU) üzerinden işlenen donanım hızlandırmalı saf CSS özellikleri ile kurgulanmalıdır.
GPU vs CPU Animasyon Performans Karşılaştırması
| Özellik | Tarayıcı İşlem Aşaması | Performans Durumu | 60 FPS Akıcılık? |
|---|---|---|---|
width, height, margin | Layout (Düzen) + Paint + Composite | Çok Yavaş (CPU tavan yapar) | Hayır, takılmalar (Jank) yaşanır |
top, left, bottom | Layout + Paint + Composite | Çok Yavaş (Yeniden çizim zorunlu) | Hayır, kare atlamaları oluşur |
transform: translate() | Yalnızca Composite (GPU Katmanı) | Işık Hızında (Doğrudan GPU) | Evet, kusursuz 60/120 FPS |
opacity | Yalnızca Composite (GPU Katmanı) | Işık Hızında (Sıfır Layout yükü) | Evet, kusursuz 60/120 FPS |
Yüksek Performanslı Buton Hover Örneği
Kötü ve iyi animasyon yaklaşımı arasındaki kod seviyesindeki fark:
/* HATALI YAKLAŞIM: Layout aşamasını tetikler, mobil cihazı kasar */
.kotu-buton:hover {
width: 220px; /* Layout tetikler */
margin-top: -5px; /* Yeniden düzen tetikler */
}
/* DOĞRU YAKLAŞIM: Yalnızca GPU kompozisyon katmanında çalışır */
.iyi-buton {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
will-change: transform;
}
.iyi-buton:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
prefers-reduced-motion ile Erişilebilirlik
Bazı kullanıcılar hareket hassasiyetine (vestibüler bozukluk) sahip olabilir veya işletim sisteminde “hareketleri azalt” modunu seçmiş olabilir. Profesyonel web siteleri bu tercihe saygı duymalıdır:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Kullanıcıyı etkileyen, yormayan ve performans kaybı yaşatmayan arayüzler için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı inceleyin.