CSS ile Animasyon Yapma: Adım Adım Uygulama
Bir kutuyu yukarı taşıyıp döndüren animasyonu tek bir HTML dosyasında oluşturabilirsiniz. Örneği tarayıcıda açarak hızını, tekrarını ve hareket azaltma ayarını test edin.
Bu yazıda neler var?
CSS ile animasyon yapma için hareketi @keyframes içinde tanımlayın ve elemana animation uygulayın. Yaklaşık 10 dakikada, yalnızca metin editörü ve tarayıcı kullanarak çalışan bir örnek hazırlayabilirsiniz. JavaScript gerekmez; örnekteki kutu yukarı çıkar, döner ve başlangıç konumuna döner.
Başlamak İçin Neler Gerekiyor?
Bir metin editörü, tarayıcı ve index.html adlı dosya yeterlidir. Dosyayı hazırlama konusunda desteğe ihtiyacınız varsa ilk HTML dosyasını oluşturma rehberini kullanın. CSS kurallarını style etiketi içinde tutacağız; ayrıca bir CSS dosyası oluşturmanız gerekmiyor.
Örnekte tek bir div hareket edecek. Bu elemanın görünümünü .kutu seçicisi belirler. Seçici ve bildirimlerin nasıl çalıştığını öğrenmek için CSS’in temel yapısı rehberine bakın. Ardından aşağıdaki işlemleri sırayla uygulayın.
İlk Animasyon Nasıl Oluşturulur?
Editörde boş bir dosya açın ve adını index.html koyun. Dosya uzantısının .html olduğundan emin olun.
Aşağıdaki tek satırlık örneğin tamamını dosyaya yapıştırın. Tarayıcı, satır sonu olmasa da HTML ve CSS kurallarını işler.
<!DOCTYPE html><html lang="tr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>CSS Animasyonu</title><style>body { min-height: 100vh; display: grid; place-items: center; margin: 0; background: #f1f5f9; } .kutu { width: 100px; height: 100px; border-radius: 20px; background: #7c3aed; animation: ziplama 1.2s ease-in-out infinite alternate; } @keyframes ziplama { from { transform: translateY(0) rotate(0deg); background: #7c3aed; } to { transform: translateY(-100px) rotate(180deg); background: #06b6d4; } } @media (prefers-reduced-motion: reduce) { .kutu { animation: none; } }</style></head><body><div class="kutu"></div></body></html>
Dosyayı kaydedin ve tarayıcıda açın. Mor kutunun yukarı çıkıp döndüğünü, renk değiştirdiğini ve geri geldiğini izleyin.
1.2s değerini 2s yapın; ardından dosyayı kaydedip sayfayı yenileyin. Kutunun aynı yolu daha yavaş tamamladığını görün.
@keyframes ziplama, başlangıç ve bitiş görünümlerini tanımlar. animation içindeki aynı ad, bu hareketi kutuya bağlar. transform ise kutuyu yukarı taşır ve kendi merkezi çevresinde döndürür.
Animasyonun Süresi, Tekrarı ve Yönü Nasıl Ayarlanır?
animation kısa yazımı birkaç ayarı tek bildirimde toplar. Örnekteki ad, süre, hız eğrisi, tekrar ve yön değerlerini aşağıdaki tablodan okuyabilirsiniz. Bir değeri değiştirirken diğerlerini yerinde bırakın; böylece gözlediğiniz farkın nedenini ayırt edersiniz.
| Ayar | Örnekteki değer | Etkisi |
|---|---|---|
| Animasyon adı | ziplama | Aynı adlı @keyframes kuralını çalıştırır. |
| Süre | 1.2s | Hareketin bir yöndeki çevrim süresini belirler. |
| Hız eğrisi | ease-in-out | Hareketi yavaş başlatır ve yavaş bitirir. |
| Tekrar | infinite | Animasyonu sürekli yineler. |
| Yön | alternate | Sonraki çevrimi ters yönde oynatır. |
Hareketin yalnızca bir kez oynatılmasını istiyorsanız infinite yerine 1 yazın. Geri dönüşü kaldırmak için alternate yerine normal kullanın. Bu durumda kutu bitiş durumundan başlangıç görünümüne aniden dönebilir.
Animasyon Yerine Transition Ne Zaman Kullanılır?
Bir butonun yalnızca fare üzerine gelince büyümesini istiyorsanız transition seçin. Sürekli tekrarlanan veya birden fazla aşaması olan hareketlerde @keyframes kullanın. Transition için başlangıç görünümünü, değişen durumu ve geçiş süresini tanımlamanız yeterlidir.
Örneğin .buton { transition: transform 0.2s ease; } ve .buton:hover { transform: scale(1.08); } kurallarını yazın. Fare butondan ayrıldığında ölçek başlangıç değerine döner. Klavyeyle erişilen bir butonda aynı görsel tepkiyi :focus-visible durumu için de tanımlayın.
Sonuç ve Hareket Azaltma Tercihi Nasıl Test Edilir?
Sayfayı açtıktan sonra kutunun hareketini ve rengini kontrol edin. Dosyadaki to bloğunda translateY(-100px) değerini -50px yapın. Kaydedip sayfayı yenilediğinizde kutunun daha kısa bir mesafe aldığını görmelisiniz.
Ardından işletim sisteminizden hareketi azaltma tercihini açıp sayfayı yeniden yükleyin. Örnekteki prefers-reduced-motion: reduce kuralı kutunun animasyonunu kapatır. Böylece sürekli hareket, bu tercihi kullanan kişilere gösterilmez. Tercihi kapatıp sayfayı yenilediğinizde animasyon yeniden çalışır.
Sık Yapılan Hatalar ve Çözümleri
Animasyon görünmüyorsa önce animation değerindeki adla @keyframes adını karşılaştırın. İkisi de ziplama olmalıdır. Kutunun rengini görüp hareketini göremiyorsanız transform bildirimlerinin doğru blokların içinde bulunduğunu kontrol edin.
Dosya düz metin olarak açılıyor: Adının index.html olduğunu kontrol edin; index.html.txt olarak kaydetmeyin.
Değişiklik görünmüyor: Dosyayı kaydedin, ardından tarayıcı sekmesini yenileyin.
Hareket başlamıyor: İşletim sistemindeki hareketi azaltma terciğini kontrol edin; örnekte bu tercih animasyonu kapatır.
Hareket ters yönde: translateY değerinin önündeki eksi işaretini kontrol edin; negatif değer kutuyu yukarı taşır.
Sorun Sürerse Hangi CSS Kuralı Kontrol Edilir?
Tarayıcının geliştirici araçlarında kutuyu seçin ve uygulanan animation bildirimini inceleyin. Bildirim üzeri çizili görünüyorsa aynı elemana yazılmış başka bir CSS kuralı onu geçersiz kılmıştır. Önce ilgili seçicileri karşılaştırın; ardından yanlış kuralı düzeltin.
Bildirim etkinse @keyframes kuralındaki süslü parantezleri kontrol edin. Başlangıç ve bitiş için iki blok bulunmalıdır: from ve to. Test sırasında animation-duration: 3s eklemek hareketi izlemeyi kolaylaştırır; bu bildirimi .kutu kuralının içine yazın.