Giriş

CSS animasyonları, bir web sayfasındaki öğelerin stil özelliklerinin zaman içinde değişmesini sağlar. Bu yazıda, hover efektleri, transition örnekleri ve basit @keyframes kullanımıyla ilgili kolay kod örnekleri paylaşacağım. Kısa açıklamalar, erişilebilirlik ve performans notlarıyla uygulamaya hazır parçalar bulacaksınız. Temel referans için MDN Web Docs'taki CSS Animations sayfasına bakabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations.

Temel kavramlar

Transition nedir?

Transition, bir öğenin bir durumdan diğerine geçerken stil değişikliklerini yumuşatmak için kullanılır. Örneğin bir öğe hover olduğunda arka plan rengini değiştirebilir ve transition sayesinde bu değişim kademeli olur. Daha fazla teknik detay için MDN'in transition sayfasını inceleyin: https://developer.mozilla.org/en-US/docs/Web/CSS/transition.

@keyframes ve animation nedir?

@keyframes, animasyonun ara adımlarını (anahtar karelerini) tanımlar; bu tanım animation özelliği ile ilişkilendirilir ve tek seferlik veya tekrar eden hareketler oluşturur. @keyframes ile yapılabilecekler ve seçenekler için MDN referansı: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40keyframes.

Hover efektleri

Hover efektleri, kullanıcı fareyi bir öğenin üzerine getirdiğinde tetiklenen görsel değişikliklerdir. Genellikle transition ile birlikte kullanılarak daha sezgisel etkileşimler oluşturulur.

1) Kolay Hover + Transition örneği

Aşağıdaki örnek, bir butonun hover halinde hafifçe yükselmesini ve renk değiştirmesini sağlar. HTML örnekleri güvenlik için kaçışlı (escaped) gösterilmiştir.

HTML: <button class="btn">Hover</button>

CSS:
.btn { display: inline-block; padding: 10px 16px; background: #3498db; color: #fff; border-radius: 6px; cursor: pointer; transition: transform 200ms ease, background-color 200ms ease; }
.btn:hover { transform: translateY(-4px); background-color: #2b93d6; }

Açıklama: transition yalnızca tanımlı özellikler değiştiğinde çalışır. Transform ve background-color gibi görsel değişiklikler genellikle beklenen sonucu verir ve kısa kodla uygulanır.

2) Basit @keyframes animasyonu

Tekrarlayan bir animasyon için @keyframes kullanabilirsiniz. Aşağıda bir "zıplama" (bounce) örneği var:

CSS:
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-12px); }
100% { transform: translateY(0); }
}
.badge { display: inline-block; background:#e74c3c; color:#fff; padding:6px 10px; border-radius:4px; animation: bounce 1s ease infinite; }

Bu yapı, sürekli tekrarlayan bir görsel hareket sağlar. @keyframes ile oluşturulan animasyonlar, otomatik veya tetiklemeli olabilir.

Zamanlama fonksiyonları ve animation shorthand

Animasyon davranışını ince ayar yapmak için çeşitli özellikler vardır. Kısa referans aşağıdadır:

Shorthand örneği: animation: fadeIn 400ms ease 50ms 1 normal forwards; — burada sırayla name, duration, timing-function, delay, iteration-count, direction ve fill-mode tanımlanır.

Erişilebilirlik: prefers-reduced-motion

Bazı kullanıcılar hareketlilikten rahatsız olabilir. Sistem tercihlerini dikkate almak için aşağıdaki örneği ekleyin:

CSS:
@media (prefers-reduced-motion: reduce) {
.animated { animation: none !important; transition: none !important; }
}

Bu kural, hareketten kaçınmak isteyen kullanıcılar için iyi bir varsayılan sağlar. Projenizde erişilebilirlik testleri yapmayı unutmayın.

Performans ipuçları (genel öneriler)

Aşağıdaki maddeler geniş kabul görmüş uygulamalardır; detaylı, tarayıcıya özel optimizasyonlar için üretici belgelerini inceleyin. MDN'in animasyon ve transition dokümanları temel kavramlar için yararlıdır: MDN CSS Animations ve MDN transition.

• Genellikle transform ve opacity gibi composite işlemler daha performanslıdır; layout tetikleyen özelliklerin (width/height/top/left) animasyonu daha maliyetli olabilir.
• will-change tarayıcıya hangi öğelerin değişeceğini bildirir; sınırlı ve dikkatli kullanılmalıdır.
• Çok sayıda aynı anda çalışan animasyonu sınırlandırın; element sayısını azaltmak performansı artırır.
• Mümkünse ağır animasyonları masaüstüyle sınırlayın veya düşük güçlü cihazlarda alternatif sağlayın.

Pratik uygulama adımları (kısa)

1. Animasyonun amacını belirleyin: bilgi verme, dikkat çekme veya estetik mi?
2. Hangi CSS özellikleriyle yapabileceğinizi planlayın (tercihen transform/opacity).
3. Kısa bir prototip oluşturun; transition veya @keyframes ile deneyin.
4. Erişilebilirlik testleri yapın (prefers-reduced-motion) ve mobil testleri gerçekleştirin.
5. Gerekirse performans profili alın ve optimize edin.

Yaygın tuzaklar ve kontroller

• Transition çalışmıyorsa, değişen özelliğin gerçekten değiştiğinden emin olun. Transition, property değişimini izler.
• Transition ile keyframe farkı: transition bir durum değişimine bağlıdır; @keyframes ise otomatik veya tekrar eden hareketler için uygundur.
• will-change aşırı kullanımı bellek kullanımını artırabilir; sadece gerektiğinde ekleyin.

Ek örnek: yüklenme sırasında fade-in

Sayfa öğelerini yüklenince görünür yapmak için basit bir fade-in kullanabilirsiniz:

CSS:
.fade-in { opacity: 0; transform: translateY(6px); animation: fadeIn 400ms ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

Burada animation-fill-mode: forwards (shorthand içinde) animasyon tamamlandığında son durumun korunmasını sağlar.

Test ve hata ayıklama

• Tarayıcı geliştirici araçlarının Performance veya Rendering sekmelerini kullanarak CPU/GPU etkisini gözleyin.
• Farklı cihazlarda (özellikle düşük güçlü telefonlarda) test yapın.
• Erişilebilirlik testleri için işletim sistemindeki hareket azaltma ayarlarını kontrol edin.

Özet ve bir sonraki adımlar

Bu rehberde hover efektleri, transition örnekleri ve @keyframes kullanımı için kolay kod örnekleri sundum. Performans ve erişilebilirlik hususlarına dikkat ederek animasyonların kullanıcı deneyimine katkı sağlaması amaçlanmalıdır. Teknik referanslar ve detaylar için MDN Web Docs kaynaklarına başvurabilirsiniz: MDN — CSS Animations, MDN — transition, ve MDN — @keyframes.

Bir sonraki adım: örnekleri kendi projelerinizde deneyin, mobil testleri yapın ve prefers-reduced-motion ile erişilebilirliği sağlamayı unutmayın.