**Soru:** CSS animasyon nasıl yapılır? JavaScript gerekmeden ne kadar şey yapılabilir? **Kısa cevap:** CSS ile oldukça fazla şey yapılabilir, geçişler (transition), anahtar kare animasyonları (keyframe) ve dönüşümler (transform) birleşince JavaScript olmadan güçlü animasyonlar mümkün. JavaScript, daha karmaşık etkileşim mantığı için gereklidir. --- **CSS animasyon için temel araçlar:** **1. Transition (Geçiş)** Bir CSS özelliği değiştiğinde yumuşak geçiş sağlar: ```css .buton { background-color: mavi; transition: background-color 0.3s ease; } .buton:hover { background-color: kırmızı; } ``` Farenin üzerine gelindiğinde renk 0.3 saniyede geçiş yapar. Sıklıkla kullanılan özellikler: `transition-duration`, `transition-timing-function`, `transition-delay`. --- **2. Transform (Dönüşüm)** Bir elemanı döndür, ölçeklendir, taşı: ```css .kart:hover { transform: scale(1.05) translateY(-4px); transition: transform 0.2s ease-out; } ``` Transform değerleri: `translate()`, `scale()`, `rotate()`, `skew()`. CSS animasyon açısından transform performans dostudur, `top/left` yerine `transform` kullanmak GPU hızlandırmasından yararlanır. --- **3. @keyframes (Anahtar Kare Animasyonu)** Daha karmaşık, çok adımlı CSS animasyon için @keyframes kullanılır: ```css @keyframes yalpala { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .ikon { animation: yalpala 0.5s ease-in-out infinite; } ``` Kullanışlı `animation` özellikleri: `animation-duration`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, `animation-delay`. --- **Performans ipuçları:** - `opacity` ve `transform` animasyon için en verimli CSS özellikleri, GPU ile doğrudan çalışır - `width`, `height`, `margin` gibi layout değiştiren özellikler animasyonda pahalıdır, reflow tetikler - `will-change: transform` ile tarayıcıyı önceden uyarabilirsin (dikkatli kullan, aşırı kullanmak bellek tüketir) --- **JavaScript ne zaman gerekir?** - Kullanıcı etkileşimine göre dinamik animasyon mantığı - Fizik tabanlı animasyonlar (yay, sürükleme) - Karmaşık sıralama ve orkestrasyon - Canvas üzerindeki animasyonlar Basit hover efektleri, sayfa geçişleri, dikkat çekme animasyonları için CSS animasyon çoğu zaman yeterlidir ve performans açısından JavaScript'ten daha hafiftir.