CSS Animations ve Transitions: Hareket Tasarımı

CSS animasyonları ve geçişleri, web arayüzlerine canlılık ve profesyonellik katar. Doğru kullanıldığında kullanıcı deneyimini iyileştirir, dikkat yönlendirir ve arayüz etkileşimlerini daha sezgisel hale getirir. Bu rehberde transition'lardan karmaşık keyframe animasyonlarına, performans optimizasyonundan motion preference'a kadar her şeyi kapsamlı şekilde ele alacağız.

1. CSS Transitions: Temel ve İleri Seviye

Transition, bir CSS özelliğinin bir değerden diğerine geçişini belirli bir süre içinde yumuşak şekilde yapmasını sağlar. Hover, focus, active gibi durum değişikliklerinde en sık kullanılan animasyon tekniğidir.

/* Temel Transition */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Birden fazla özellik — farklı süreler */
.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease;
  border: 2px solid transparent;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
}

/* Input Focus Animasyonu */
.input-field {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

Bilgi: transition: all kullanmak kolay olsa da performans açısından ideal değildir. Sadece değişmesini istediğiniz özellikleri belirtin: transition: transform 0.3s, opacity 0.3s.

2. CSS Keyframe Animations

Keyframe animasyonları, transition'ların aksine birden fazla ara durumu tanımlamanıza olanak tanır. Otomatik başlayabilir, tekrarlanabilir ve daha karmaşık hareket desenleri oluşturabilirsiniz.

/* Fade In Up — Sayfa yüklenme animasyonu */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Staggered animasyon — sıralı görünüm */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

/* Pulse animasyonu — dikkat çekme */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

/* Skeleton Loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

3. Performans Optimizasyonu

Tüm CSS özellikleri eşit performansa sahip değildir. Bazı özellikler GPU hızlandırmalı "compositor" katmanında çalışırken, bazıları pahalı layout ve paint işlemlerini tetikler. Performanslı animasyonlar için doğru özellikleri seçmek kritiktir.

/* PERFORMANSLI — Sadece compositor özellikleri */
.good-animation {
  transition: transform 0.3s, opacity 0.3s;
  /* transform ve opacity GPU'da çalışır */
}

.good-animation:hover {
  transform: scale(1.1) translateY(-5px);
  opacity: 0.9;
}

/* PAHALI — Layout/Paint tetikler, KAÇININ */
.bad-animation {
  transition: width 0.3s, height 0.3s, margin 0.3s;
  /* width, height, margin → layout recalculation */
}

/* will-change ile GPU katmanı oluşturma */
.animated-element {
  will-change: transform;
  /* Tarayıcıya "bu eleman hareket edecek" sinyali */
}

/* contain ile izolasyon */
.isolated-animation {
  contain: layout style paint;
  /* Bu elemanın değişiklikleri dışarıyı etkilemez */
}

/* Performanslı genişlik animasyonu — transform ile */
.expandable {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.expandable.active {
  transform: scaleX(1);
}

Uyarı: will-change özelliğini gerekmediğinde kullanmayın. Her will-change tanımı ekstra GPU belleği tüketir. Sadece gerçekten animasyon uygulayacağınız elemanlarda ve tercihen JavaScript ile animasyon başlamadan hemen önce ekleyin.

4. Erişilebilirlik: prefers-reduced-motion

Bazı kullanıcılar (vestibüler bozukluklar, epilepsi vb.) hareket eden içeriklerden olumsuz etkilenebilir. prefers-reduced-motion media query'si ile bu kullanıcılara saygılı bir deneyim sunmak hem etik hem de profesyonel bir yaklaşımdır.

/* Reduced motion tercih eden kullanıcılar için */
@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;
  }
}

/* Daha granüler yaklaşım */
.hero-animation {
  animation: slideIn 0.8s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-animation {
    animation: fadeIn 0.3s ease forwards;
    /* Hareket yerine sadece fade */
  }
}

/* Sadece hareket istemeyenler için devre dışı bırak */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
  }

  .scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

İpucu: Animasyonlarınızı "no-preference" media query'si içinde tanımlayarak, varsayılan olarak animasyonsuz bir deneyim sunabilir ve sadece animasyon isteyen kullanıcılara hareket ekleyebilirsiniz. Bu "motion-safe" yaklaşım olarak adlandırılır.

Sonuç

CSS animasyonları ve transition'lar, kullanıcı deneyimini zenginleştiren güçlü araçlardır. Transition'lar durum değişikliklerinde, keyframe animasyonları ise daha karmaşık hareket desenlerinde kullanılır. Performans için sadece transform ve opacity özelliklerini anime edin, erişilebilirlik için prefers-reduced-motion desteği ekleyin. Animasyonları abartmayın — her animasyonun bir amacı olmalıdır: dikkat yönlendirme, geri bildirim verme veya bağlam değişikliğini yumuşatma.

CSS Animations ve Transitions: Hareket Tasarımı