React ile CSS Kare Animasyonları

Bir @keyframes kuralı, zaman çizelgesindeki noktalarda özellik değerlerini adlandırarak çok aşamalı bir animasyonu tanımlar; bunun için from/to veya 0%, 50%, 100% gibi yüzdeler kullanılır.

Geçişlerin aksine, anahtar kareler her adımda durum değişikliği gerektirmeden kendi başına çalışan karmaşık, çok aşamalı hareketleri tanımlayabilir.

Bir anahtar kare kümesini animation özelliğiyle uygularsınız: animation: slideIn 400ms ease forwards. Bu bildirim; adı, süreyi, zamanlama işlevini ve dolgu kipini tek yerde birleştirir.

forwards dolgu kipi, animasyon sona erdikten sonra öğenin son anahtar kare değerlerinde kalmasını sağlar ve başlangıca geri sıçramasını önler.

React'te genellikle durum true olduğunda animation bildirimini taşıyan bir sınıf eklersiniz. Örneğin is-entering sınıfını eklemek, öğe bağlandığı veya bir bayrak değiştiği anda anahtar kareleri başlatır.

Bu yaklaşım, animasyon mantığını CSS'te tutarken React'in yalnızca sınıfın ne zaman ekleneceğine karar vermesini sağlar.

animation-fill-mode, animasyon çalışmadan önce ve çalıştıktan sonra hangi stillerin uygulanacağını belirler. forwards son anahtar kareyi korur, backwards herhangi bir gecikme sırasında ilk anahtar kareyi uygular ve both her ikisini de yapar.

forwards olmadan, soluk bir durumdan görünür bir duruma canlandırılan öğe animasyon tamamlandığında yeniden görünmez hâle sıçrar.

animation-direction: alternate, her yinelemede animasyonu önce ileri, sonra geri oynatır. animation-iteration-count: infinite ile birleştirildiğinde, titreşim veya nefes alma etkisi gibi akıcı bir ileri-geri hareket oluşturur.

Bu özellik, yükleme göstergeleri veya dikkat çeken ancak zarif hareketler için kullanışlıdır.

animation-play-state, running veya paused olabilir. Bu değeri React durumundan yönetebilirsiniz; örneğin bir sınıfı değiştirerek üzerine gelindiğinde kayan yazıyı duraklatabilirsiniz.

Sıfırlanmak yerine duraklatıldığı için animasyon tam olarak durduğu yerden devam eder.

Bir anahtar kare animasyonu, sınıfı ilk kez uygulandığında yalnızca bir kez oynar; aynı sınıfı yeniden eklemek animasyonu yeniden başlatmaz. React'te en temiz çözüm, React'in yeni bir düğümü yeniden oluşturmasını ve animasyonu baştan oynatmasını sağlamak için öğenin key değerini değiştirmektir.

Örneğin, bir bildirime eklenen key={count}, sayı her arttığında bildirimin yeniden oluşturulmasını ve DOM'a eklenmesini sağlar.

Bazı kullanıcılar rahatlık veya erişilebilirlik için OS'lerinde hareket azaltma özelliğini etkinleştirir. Gerekli olmayan animasyonları @media (prefers-reduced-motion: reduce) içine alın ve orada devre dışı bırakın veya kısaltın.

Bu tercihe uymak arayüzünüzü daha kapsayıcı hale getirir ve rahatsızlık tetiklemekten kaçınır.

Öğeler görünüm alanına girdikçe onları canlandırmak için bir IntersectionObserver'ı useEffect içinde kullanın. Gözlem girdisi görünür olduğunda durumu ayarlarsınız; bu da animasyon sınıfını ekler.

Bu yöntem, her karede çalışan ağır kaydırma dinleyicileri olmadan kaydırmayla ortaya çıkma efektleri oluşturur.

animation-delay, her anahtar kare animasyonunun ne zaman başlayacağını kademelendirir. Bir öğe listesine giderek artan gecikmeler vermek, öğelerin sıralı ve koreografisi yapılmış biçimde görünmesini sağlar.

Gecikmeyi React'te her öğe için style={{ animationDelay: i * 80 + 'ms' }} ile hesaplayabilirsiniz.

Etkileşimle tetiklenen basit iki durumlu değişiklikler için geçişleri; birden çok adımlı hareket, döngü veya durum değişikliğinden bağımsız çalışan animasyon gerektiğinde anahtar kareleri kullanın.

Her ikisi de saf CSS kullanır; bu nedenle React yalnızca sınıfların ne zaman ekleneceğine karar verir, kareleri ise tarayıcı yönetir.

Anahtar kare davranışını anlayıp anlamadığınızı sınayın.

@keyframes tanımlamayı, bunları animation kısaltmasıyla uygulamayı, dolgu modunu ve yönünü denetlemeyi, animasyonları duraklatıp yeniden tetiklemeyi ve IntersectionObserver ile öğeleri kaydırma sırasında görünür kılmayı öğrendiniz.

Ayrıca erişilebilir hareket için prefers-reduced-motion tercihini nasıl dikkate alacağınızı gördünüz.