Basit CSS animasyonları: hover, transition ve keyframe örnekleri

Basit CSS animasyonları: hızlı giriş

CSS ile yapılan animasyonlar, kullanıcı arayüzünü daha akıcı ve anlaşılır hale getirir. Basit etkileşimler için çoğunlukla hover (imleçle üstüne gelme), transition (özelliklerin yumuşak geçişi) ve @keyframes (zaman içinde birden çok durak tanımlama) kullanılır. MDN üzerinde transition ve animasyonlar hakkında teknik ve güncel açıklamalara bakabilirsiniz: transition - MDN ve CSS animations - MDN.

Ne zaman hangisini kullanmalı?

Kısa cevap: tek bir stil değişimini (ör. renk, opacity, transform) tetiklemek için transition, daha karmaşık zaman çizelgeleri veya birden fazla adımı ardışık çalıştırmak için @keyframes tercih edilir. Hover etkileşimleri genellikle transition ile yapılır çünkü basit ve hafiftir.

1) Hover ile basit animasyon örneği (buton)

Aşağıdaki örnek, bir bağlantı/buton üzerinde küçük bir büyüme ve renk geçişi uyguluyor. Burada transition özelliği kullanılıyor; transition'ın nasıl çalıştığı için MDN belgelerine bakabilirsiniz: https://developer.mozilla.org/docs/Web/CSS/transition.

1. <a href="#" class="btn">Butona Gel</a>

CSS (satır satır):

1. .btn {
2. display: inline-block;
3. padding: 0.6rem 1rem;
4. background: #4C9AFF;
5. color: #fff;
6. border-radius: 6px;
7. text-decoration: none;
8. transition: transform 180ms ease, background-color 180ms ease;
9. }
10. .btn:hover {
11. transform: translateY(-3px) scale(1.03);
12. background-color: #3a8fe0;
13. }

Açıklama: Burada sadece transform ve background-color geçişleri hedefleniyor. Basit etkileşimler için transition kısa ve etkilidir.

2) Transition: opacity ve transform ile kart efekti

Bir kart üzerinde hafif yukarı hareket ve gölge/eğim efekti için transition uygundur. Transition parametreleri (transition-property, transition-duration, transition-timing-function, transition-delay) hakkında detaylı bilgi için MDN'deki transition-duration - MDN (TR) sayfasına bakabilirsiniz.

1. .card {
2. transition: transform 250ms ease, box-shadow 250ms ease, opacity 250ms ease;
3. transform: translateY(0);
4. opacity: 1;
5. }
6. .card:hover {
7. transform: translateY(-8px);
8. box-shadow: 0 12px 24px rgba(0,0,0,0.12);
9. opacity: 0.98;
10. }

Açıklama: Opacity ve transform birlikte kullanıldığında, hem görünürlüğü hem de konumu yumuşatarak hoş bir efekt verir.

3) Keyframes: sayfa yüklenmesinde kayan panel

Eğer bir elemanın yüklenme sırasına göre birden fazla durakla hareket etmesini istiyorsanız @keyframes kullanın. Keyframe animasyonları hakkında MDN'in animasyon rehberini inceleyin: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations.

1. @keyframes slide-in {
2. from { transform: translateX(-100%); opacity: 0; }
3. to { transform: translateX(0); opacity: 1; }
4. }
5. .panel {
6. animation: slide-in 0.6s cubic-bezier(.22,.9,.03,1) forwards;
7. }

Not: animation-fill-mode: forwards kullanımı, animasyon bittikten sonra son durumun korunmasını sağlar. Bu özellikle ilgili MDN sayfası için: animation-fill-mode - MDN.

4) Tekrar eden ve yönlü animasyonlar

Örneğin bir ikonun hafifçe zıplaması için:

1. @keyframes bounce {
2. 0% { transform: translateY(0); }
3. 50% { transform: translateY(-8px); }
4. 100% { transform: translateY(0); }
5. }
6. .icon { animation: bounce 1.2s ease-in-out infinite; }

Alternatif olarak animation-direction: alternate ile ileri-geri davranışı sağlayabilirsiniz.

Performans ipuçları

Animasyonların performansı, kullanıcı deneyimini doğrudan etkiler. Genel öneriler:

• Animasyonlar sadece gerekli özellikleri hedeflesin; transform ve opacity çoğunlukla donanım hızlandırmalı ve daha hızlıdır. (Kaynak: MDN CSS animations).
• Layout (yeniden akış) tetikleyen özelliklere (width, height, top, left, margin) mümkün olduğunca az animasyon uygulanmalı; bunlar pahalıdır.
• will-change kullanmak kısa süreli iyileştirme sağlayabilir ancak gereksiz kullanımı bellek/performans sorunlarına yol açabilir.
• Basit etkileşimler için önce transition deneyin; karmaşık zamanlamalar için @keyframes tercih edin.

Erişilebilirlik (prefers-reduced-motion)

Hareketten kaçınmayı tercih eden kullanıcılar için prefers-reduced-motion medya sorgusunu kullanarak animasyonları azaltmak iyi bir uygulamadır. Örnek:

1. @media (prefers-reduced-motion: reduce) {
2. * { animation: none !important; transition: none !important; }
3. }

Bu, hareket hassasiyeti olan kullanıcılar için daha rahat bir deneyim sağlar. Uygulamada test etmeyi unutmayın.

Uygulama adımları: kısa kontrol listesi

• 1) Hangi görsel değişikliğe ihtiyacınız olduğunu tanımlayın (konum, opacity, renk...).
• 2) Hedef özellikleri seçin: mümkünse transform veya opacity.
• 3) Basitse transition, adım adım gerekiyorsa @keyframes kullanın.
• 4) Süre ve timing-function seçin (genelde 150–400ms arası, easing tercih edilir).
• 5) Performans testi ve erişilebilirlik (prefers-reduced-motion) kontrollerini yapın.

Sonuç

Hover, transition ve keyframe ile pek çok basit ama etkili animasyon yapılabilir. Basit etkileşimlerde transition, daha uzun veya çok adımlı hareketler için @keyframes idealdir. Performans ve erişilebilirlik kriterlerini göz önünde bulundurarak küçük adımlarla başlayın ve MDN dokümantasyonunu referans alın: MDN Animations, MDN Transition.