Basit CSS Animasyon Örnekleri: Hover, Transition ve Keyframes
Bu yazı, CSS Animasyon Mini Örnekleri arayan geliştiriciler için pratik ve doğrudan uygulanabilir örnekler sunar. Aşağıda :hover ile etkileşim, transition ile yumuşak geçişler ve @keyframes ile daha karmaşık zamanlamalı animasyonlar göreceksiniz. Her örnek kısa açıklama, adım adım kod ve hangi ayarın ne işe yaradığıyla birlikte verilecektir.
Temel kavramlar (kısa)
- CSS animasyonları: HTML öğelerinin görsel özelliklerini zaman içinde değiştirmeye yarar; daha fazla bilgi için MDN notlarına bakın (MDN: CSS Animations) (kaynak: turn0search3).
- :hover: Fare bir öğenin üzerine geldiğinde uygulanan pseudo-class. Mobil cihazlarda farklı davranışlar olabilir; klavye ile erişim için :focus eklemeyi düşünün (MDN: :hover) (kaynak: turn0search7).
- transition: Bir CSS özelliğinin bir değerden diğerine zaman içinde yumuşakça geçmesini sağlar. Özellik, süre, zamanlama fonksiyonu ve gecikme parametreleri vardır (MDN: transition) (kaynak: turn0search8).
- @keyframes: Bir animasyonun ara adımlarını (keyframes) tanımlayarak daha kontrollü hareketler oluşturmayı sağlar; MDN: @keyframes sayfası faydalıdır (kaynak: turn0search0).
1) Basit :hover + transition — Arka plan rengi değişimi
Aşağıdaki örnek, bir düğme üzerine gelindiğinde arka plan renginin yumuşakça değişmesini gösterir. Bu tip etkileşimler, kullanıcıya geri bildirim verir ve UI öğelerini daha canlı gösterir.
HTML
HTML:
<button class="btn">Hover me</button>
CSS
CSS:
.btn {
background-color: #3498db;
color: #fff;
padding: 10px 18px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 200ms ease, transform 200ms ease;
}
.btn:hover, .btn:focus {
background-color: #2ecc71;
transform: translateY(-3px);
}
Açıklama: transition ile hangi özelliğin, ne kadar sürede ve hangi zamanlama fonksiyonuyla değişeceğini belirtiyoruz. :focus eklenmesi klavye erişimi sağlayan kullanıcılar için aynı görsel geri bildirimi verir.
2) Hover efektleri: ölçeklendirme ve gölge
Hover efektleri yalnızca renk değiştirmekten ibaret değildir. Aşağıdaki örnek, kart benzeri öğelerin üzerine gelindiğinde hafifçe büyümesini ve gölge almasını gösterir.
HTML
HTML:
<div class="card">Kart içeriği</div>
CSS
CSS:
.card {
background: #fff;
padding: 16px;
border-radius: 8px;
transition: transform 180ms ease, box-shadow 180ms ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card:hover, .card:focus {
transform: scale(1.03);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
Not: Görsel performans için transform ve opacity gibi özellikler genellikle layout'u yeniden hesaplamadan çalıştığı için tercih edilir. Hangi özelliklerin animasyonla uyumlu olduğunu MDN'in transition sayfasında bulabilirsiniz (MDN: transition) (kaynak: turn0search8).
3) @keyframes ile zamanlamalı animasyon: slide-in
@keyframes, animasyonun başlangıç, ara ve bitiş durumlarını tanımlamanızı sağlar. Aşağıda bir öğeyi alttan yukarı doğru kaydırarak görünür hale getiren basit bir örnek var.
CSS
CSS (@keyframes):
@keyframes slideIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in {
animation: slideIn 600ms cubic-bezier(.22,.9,.32,1) both;
}
Açıklama: animation kısa yazımı ile animasyon adı, süresi, zamanlama fonksiyonu ve doluluk davranışı (fill-mode) kontrol edilir. Bu örnekte both kullanımı, animasyon bitiminde son durumun korunmasını sağlar.
4) Sürekli dönen ikon (infinite animation)
Tekrarlayan animasyonlar için infinite kullanabilirsiniz. (Kod etiketlerini göstermekteyiz fakat lütfen sayfanızda @keyframes tanımını ayrı bir CSS dosyasında tutun.)
CSS
CSS:
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
display: inline-block;
animation: spin 1s linear infinite;
}
Bu kullanım, örneğin bir yükleme göstergesi (loading) için uygundur. Sürekli animasyonlar dikkat gerektirir; gereksiz karmaşık veya uzun süreli animasyonlar kullanıcıyı yorar.
Erişilebilirlik ve tercih edilen hareket (reduced motion)
Animasyonları eklerken erişilebilirliği düşünün. Bazı kullanıcılar hareketli içeriklere karşı hassas olabilir. Bu nedenle işletim sistemi düzeyindeki hareket azaltma tercihlerini okumak ve bu isteğe saygı göstermek iyi bir uygulamadır:
CSS (tercihleri dikkate alma)
CSS:
@media (prefers-reduced-motion: reduce) {
.slide-in, .spinner, .card, .btn {
animation: none !important;
transition: none !important;
}
}
Bu kural, kullanıcının reduced motion tercihini gördüğünde animasyonları devre dışı bırakır veya sadeleştirir.
Hızlı kontrol listesi: uygulamaya geçmeden önce
- Tasarım için kısa süreler kullanın (genelde 150–600ms arası uygundur, ihtiyaca göre ayarlayın).
- Performans için transform ve opacity tercih edin; layout-affecting özellikleri animasyonlamaktan kaçının.
- Klavyeyle erişim için :focus stillerini ekleyin.
- Erişilebilirlik için prefers-reduced-motion kontrolü ekleyin.
- Tarayıcı testleri yapın ve gerektiğinde vendor-prefix değil modern özellikleri kullandığınızdan emin olun.
Deneme ve hata giderme (pratik ipuçları)
- Eğer animasyon görünmüyorsa: animasyon adı ile @keyframes adının aynı olduğundan emin olun.
- Transition çalışmıyorsa: geçiş yaptığınız özelliğin gerçekten animasyonlanabilir olup olmadığını kontrol edin; tüm özellikler transition ile değiştirilemez (MDN: transition) (kaynak: turn0search8).
- Performans sorunları varsa: DevTools > Performance kaydı alarak hangi işlemlerin yeniden düzenlemeye (reflow) neden olduğunu inceleyin.
Özet ve sonraki adımlar
Bu rehberde CSS animasyon mini örnekleri olarak :hover + transition ve @keyframes kullanarak nasıl etkileşimli ve zamanlamalı animasyonlar oluşturacağınızı gösterdik. Örnekleri kopyalayıp kendi projenize yapıştırarak başlayın; sonra süreleri, zamanlama fonksiyonlarını ve anahtar kareleri (keyframes) ihtiyaca göre ayarlayın. Daha ayrıntılı teknik referans ve enumerasyonlar için MDN dökümanlarını inceleyin: CSS Animations, :hover, transition ve @keyframes sayfaları faydalıdır (turn0search3, turn0search7, turn0search8, turn0search0).