Hover ve Keyframe Animasyonları: Kolay Kod Örnekleriyle Basit CSS Rehberi

CSS’te animasyon mantığı: “transition” mı, “@keyframes” mi?

CSS ile hareket ve geçiş efektleri yazmanın iki temel yolu vardır: transition ve animation. İkisi de arayüzü daha anlaşılır gösterebilir; fakat kullanım amaçları farklıdır.

• Transition: Bir öğenin bir durumdan başka bir duruma geçişini yumuşatır. En sık kullanım: :hover, :focus, .is-active gibi durum değişiklikleri.
• @keyframes + animation: Zaman çizelgesi üzerinde birden fazla ara adım tanımlayıp animasyonu bağımsız çalıştırır. Döngüler, “loading” hareketleri, daha kompleks sekanslar için uygundur.

Söz dizimi ve alt özellikler için resmi dokümanlar: MDN: Using CSS transitions ve MDN: CSS animations.

1) Transition ile hover efektleri (en hızlı başlangıç)

Hover efektleri için pratik yaklaşım: normal stile transition ekleyin, :hover içinde hedef değerleri değiştirin.

Örnek 1: Buton hover – renk + hafif yükselme

Copy HTML
<a class="btn" href="https://example.com">Get Started</a>

Copy CSS
.btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 10px;
  background: #1f6feb;
  color: white;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 180ms ease, background-color 180ms ease;
}
.btn:hover {
  background: #1858c7;
  transform: translateY(-2px);
}

• Animasyonlanan özellikler: transform, background-color
• Süre / eğri: 180ms, ease
• Tetikleyici: .btn:hover

İpucu: Transition’ı :hover içinde değil, normal sınıfta tanımlamak hover bittiğinde de yumuşak dönüş sağlar (MDN örnek yaklaşımıyla uyumludur).

Örnek 2: Kart hover – gölge + ölçek

Not (performans): web.dev, bazı özelliklerin animasyon sırasında daha fazla iş (özellikle yeniden boyama veya yerleşim hesapları) tetikleyebileceğini; bu yüzden mümkün olduğunda transform/opacity gibi seçeneklerin tercih edilip değişikliklerin profillenerek doğrulanmasını önerir. (Kaynak: web.dev: Transitions) Box-shadow gibi efektler de öğenin alanı ve cihaz/GPU durumuna göre daha maliyetli olabilir; değerleri hafif tutup gerçek cihazda test edin.

Copy HTML
<div class="card">
  <h3>Plan</h3>
  <p>Kısa açıklama.</p>
</div>

Copy CSS
.card {
  padding: 16px;
  border-radius: 14px;
  background: #ffffff;
  transform: scale(1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

• Animasyonlanan özellikler: transform, box-shadow
• Süre / eğri: 200ms, ease
• Not: Görsel efektler (ör. gölge) bazı senaryolarda daha ağır hissedilebilir; profilleyip test edin (web.dev).

Örnek 3: Link underline animasyonu (background-size yöntemi)

Copy HTML
<a class="u-link" href="https://example.com">Docs</a>

Copy CSS
.u-link {
  color: #111827;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 180ms ease;
}
.u-link:hover {
  background-size: 100% 2px;
}

• Animasyonlanan özellik: background-size
• Süre / eğri: 180ms, ease

2) Transition söz dizimi: Ne yazdığınızı bilin

transition kısa gösterimi, birden fazla alt özelliği tek satırda birleştirir (property, duration, timing-function, delay). Detay: MDN: Using CSS transitions.

Okunabilir bir şablon

transition: <property> <duration> <timing-function> <delay>;

• property: Hangi CSS özelliği geçiş yapacak? (örn. transform, opacity, background-color)
• duration: Ne kadar sürecek? (örn. 180ms)
• timing-function: Hız eğrisi (ease, linear, ease-in, ease-out, cubic-bezier(...))
• delay: Başlamadan önce beklenecek süre (opsiyonel)

Timing-function seçimi: küçük bir rehber

• ease: Genel UI geçişlerinde yaygın bir varsayılan.
• ease-out: Hover ile “yaklaşma / yükselme” gibi hareketlerde çoğu zaman doğal hissettirebilir.
• linear: Sürekli akan, tekrar eden hareketlerde (örn. spinner) tutarlı görünür.

3) @keyframes ile animasyon: Zaman çizelgesi kontrolü

Transition “durum değişiminde” çalışır; @keyframes ise animasyonun ara adımlarını tanımlar. Animation özellikleri (duration, timing-function, iteration-count vb.) ile birlikte kullanılır. Detay: MDN: CSS animations.

Örnek 4: Basit pulse (vurgulama) animasyonu

Copy HTML
<span class="badge">New</span>

Copy CSS
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.08); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #16a34a;
  color: white;
  animation: pulse 900ms ease-in-out 0ms 2;
}

• Animasyonlanan özellikler: transform, opacity
• Süre / eğri / tekrar: 900ms, ease-in-out, 2 kez

Örnek 5: Loading spinner (sürekli döngü)

Copy HTML
<div class="spinner" aria-label="Loading"></div>

Copy CSS
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.55);
  animation: spin 800ms linear infinite;
}

• Animasyonlanan özellik: transform: rotate()
• Süre / eğri / tekrar: 800ms, linear, infinite

Örnek 6: Hover ile keyframe tetikleme (isteğe bağlı)

Copy HTML
<span class="icon" aria-label="Icon">*</span>

Copy CSS
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
.icon:hover {
  animation: wiggle 220ms ease-in-out 0ms 1;
}

• Tetikleyici: .icon:hover
• Süre / eğri / tekrar: 220ms, ease-in-out, 1 kez

4) Transition vs Animation: Hızlı karşılaştırma tablosu

5) Performans: Hangi özellikleri animasyonlamalısınız?

Akıcı animasyon için her karede yapılan iş yükü önemlidir. web.dev, transform ve opacity animasyonlarının çoğu durumda daha elverişli olabildiğini; layout etkileyen değişikliklerin (örn. width/height/top/left) ise ek hesaplamalar tetikleyebileceğini anlatır. Bu nedenle doğru yaklaşım, mümkün oldukça transform/opacity ile çözmek ve sonucu profiling ile doğrulamaktır: web.dev: Transitions.

Pratik kontrol listesi

• Genellikle tercih edilenler: transform (translate/scale/rotate), opacity
• Duruma göre daha maliyetli olabilenler: geniş alanlara uygulanan gölge/efekt türleri (ör. box-shadow) cihaz ve sahne karmaşıklığına göre daha ağır hissedilebilir; küçük değerlerle deneyin ve test edin.
• Layout etkileyenler: width/height/top/left gibi değişimler daha fazla yeniden hesaplama gerektirebilir; gerekiyorsa süreyi kısa tutun ve profilleyin.

En iyi yaklaşım: hedef tarayıcı ve gerçek cihazlarda test etmek; DevTools performans araçlarıyla gözlem yapmaktır.

6) Erişilebilirlik: prefers-reduced-motion ile hareketi azaltın

Animasyonlar bazı kullanıcılar için rahatsız edici olabilir. Bu nedenle prefers-reduced-motion ile animasyon/transition’ları kapatmak veya sadeleştirmek önerilen bir pratiktir: web.dev: Transitions.

Hızlı uygulama örneği

Copy CSS
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Not: Bu örnek “genel kapatma” yaklaşımıdır. Üretimde, yalnızca gerekli bileşenlerde azaltma yapmak isteyebilirsiniz.

7) Tarayıcı desteği ve test: Nereden kontrol etmeli?

Transition genel olarak yaygın destek görür; yine de hedef kitlenize göre kontrol etmek iyi bir pratiktir. Can I use: CSS Transitions bu konuda hızlı bir tablo sunar.

• Hedef tarayıcıları belirleyin (özellikle mobil).
• Özelliği Can I Use üzerinden kontrol edin.
• En kritik etkileşimleri gerçek cihazda test edin (hover, focus, dokunmatik davranışlar).

Dokunmatik cihazlarda hover davranışı farklı olabilir; kritik işlevleri yalnızca hover’a bağlamamaya çalışın.

8) Mini “uygula ve öğren” planı (10 dakika)

1. Bir buton seçin: .btn sınıfı oluşturun.
2. Normal duruma transition ekleyin: transform ve background-color ile başlayın.
3. :hover içinde hedef değerleri değiştirin: translateY ve daha koyu bir renk gibi.
4. Bir keyframe ekleyin: pulse veya spin gibi.
5. prefers-reduced-motion ekleyin: animasyonları azaltıp sayfayı tekrar deneyin.
6. Hız eğrisini değiştirin: ease-out ve linear karşılaştırın.

Sonuç

Basit hover efektlerinde transition ile hızlıca temiz bir etkileşim hissi yakalayabilirsiniz. Daha anlatımlı hareketler, döngüler veya çok adımlı sekanslar için @keyframes ve animation devreye girer. Performans ve erişilebilirlik için (özellikle) transform/opacity tercihlerini ve prefers-reduced-motion desteğini ihmal etmeyin.