CSS Animasyon: transition ve keyframes rehberi

CSS animasyon, bir arayüzü statik bir belgeden canlı, akıcı bir deneyime dönüştüren en pratik araçtır. JavaScript yazmadan, yalnızca stil kurallarıyla butonların yumuşakça renk değiştirmesini, kartların ekrana süzülerek girmesini ve yükleme göstergelerinin dönmesini sağlayabilirsiniz. Bu rehberde iki temel mekanizmayı ayrı ayrı ele alacağım: durum değişimlerinde devreye giren transition ve zamanlanmış, çok adımlı hareketler için @keyframes.

transition: durumlar arası akıcı geçişler

transition, bir özelliğin değeri değiştiğinde aradaki adımları otomatik olarak doldurur. Yani bir :hover, :focus ya da JavaScript ile eklenen bir sınıf bir rengi veya boyutu değiştirdiğinde, sıçrama yerine yumuşak bir geçiş görürsünüz. Dört temel bileşeni vardır: hangi özellik, ne kadar sürede, hangi hızlanma eğrisiyle ve ne kadar gecikmeyle.

.btn {
  background: #4f46e5;
  transform: scale(1);
  transition: background 200ms ease, transform 200ms ease;
}

.btn:hover {
  background: #6366f1;
  transform: scale(1.05);
}

Burada transition kısayolu sırasıyla özellik, süre ve zamanlama fonksiyonunu alır. Birden fazla özelliği virgülle ayırarak listeleyebilirsiniz. Mümkün olduğunca all yerine geçiş yapacak özellikleri tek tek yazın; bu hem performansı korur hem de istemediğiniz özelliklerin yanlışlıkla animasyonlanmasını önler.

Zamanlama fonksiyonları (easing)

Hareketin doğal görünmesi büyük ölçüde hız eğrisine bağlıdır. Gerçek dünyada nesneler ani başlayıp ani durmaz; hızlanır ve yavaşlar. CSS bunun için hazır anahtar kelimeler ve özel eğriler sunar:

ease — varsayılan; yumuşak başlayıp yumuşak biten dengeli bir eğri.
linear — sabit hız; dönen yükleyiciler için idealdir.
ease-out — hızlı başlar, yavaş biter; içeri giren öğeler için doğal hissettirir.
cubic-bezier(0.34, 1.56, 0.64, 1) — kendi eğrinizi tanımlar; 1'i aşan değerler hafif bir "yaylanma" etkisi verir.

Çoğu arayüz mikro etkileşimi için 150–300 ms arası süreler en doğal aralıktır. Çok kısa süreler fark edilmez, çok uzun süreler arayüzü ağır hissettirir.

@keyframes: çok adımlı animasyonlar

transition yalnızca iki durum arasında çalışır: başlangıç ve bitiş. Bir öğenin önce büyüyüp sonra küçülmesi ya da sürekli dönmesi gibi çok aşamalı hareketler için @keyframes kullanılır. Önce bir kare dizisi tanımlarsınız, sonra bunu animation özelliğiyle bir öğeye uygularsınız.

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

Yüzdeler animasyonun zaman çizgisindeki noktaları temsil eder; from ve to ise 0% ve 100% için kısayollardır. animation kısayolu sırasıyla isim, süre, easing, tekrar sayısı (infinite sonsuz) ve yön gibi değerleri alır.

Performans: neyi animasyonlamalı?

Akıcı bir animasyon saniyede 60 kareyi hedefler. Bunu yakalamanın anahtarı, tarayıcının sayfa düzenini (layout) yeniden hesaplamasına yol açmayan özellikleri animasyonlamaktır. transform ve opacity doğrudan GPU üzerinde, düzeni bozmadan işlenir; bu yüzden tercih edilmelidir.

İyi: transform (translate, scale, rotate) ve opacity.
Kaçın: width, height, top, left, margin gibi her karede yeniden hesaplama (reflow) tetikleyen özellikler.

Örneğin bir öğeyi sola kaydırmak için left değil transform: translateX() kullanın. Yoğun bir animasyonun başlamadan önce optimize edileceğini tarayıcıya bildirmek isterseniz will-change: transform; ekleyebilirsiniz; ama bunu yalnızca gerçekten ihtiyaç duyduğunuzda yapın, çünkü aşırı kullanımı bellek tüketir.

Erişilebilirlik: hareketi azaltma tercihine saygı

Bazı kullanıcılar fazla hareketten rahatsız olur ya da vestibüler bozukluk nedeniyle bunu işletim sistemi düzeyinde kapatır. Bu tercihi prefers-reduced-motion medya sorgusuyla onurlandırmak iyi bir uygulamadır:

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

Bu kural, dekoratif animasyonları etkili biçimde devre dışı bırakırken arayüzün işlevselliğini korur.

Pratik bir örnek: ekrana süzülerek giren kart

Aşağıdaki örnek, bir kartı hafifçe aşağıdan yukarıya ve şeffaftan opak hale getirerek getirir. Sadece transform ve opacity kullandığı için akıcıdır.

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

.card {
  animation: fade-up 400ms ease-out both;
}

both değeri, animasyonun başlangıç durumunu animasyon başlamadan önce ve bitiş durumunu bittikten sonra da koruması anlamına gelir; böylece kart yanıp sönmeden sabit kalır.

Sık Sorulan Sorular

transition ve animation arasındaki fark nedir?

transition yalnızca iki durum arasında, genellikle bir etkileşime (hover, focus, sınıf değişimi) tepki olarak çalışır. animation ise @keyframes ile çok adımlı, kendi kendine başlayabilen ve döngüye girebilen hareketler tanımlar.

Animasyonlarım neden takılıyor?

Genellikle sebep, her karede sayfa düzenini yeniden hesaplatan width, top veya margin gibi özellikleri animasyonlamaktır. Bunları transform ve opacity ile değiştirmek çoğu takılmayı çözer.

JavaScript olmadan kaydırınca tetiklenen animasyon yapabilir miyim?

Evet. Modern tarayıcılarda CSS animation-timeline: view(); ile scroll tabanlı animasyonlar mümkündür; daha geniş tarayıcı desteği için ise IntersectionObserver ile bir sınıf eklemek hâlâ en güvenilir yöntemdir.

Arayüzünüze profesyonel, akıcı bir his katmak mı istiyorsunuz? Performanslı CSS animasyonları ve mikro etkileşimler konusunda yardıma ihtiyacınız varsa benimle iletişime geçin.