animation-trigger: CSS animasyonlarını koşula bağla

CSS'de bir animasyonu hemen başlatmak yerine, belirli bir koşul gerçekleşene kadar bekletmek istersen animation-trigger özelliği devreye giriyor. Bu özellik, animasyonun başlangıcını kontrol altında tutmanı sağlıyor.

Klasik CSS animasyonları (animation-delay gibi) zaman tabanlı çalışır, sayfa yüklendiğinde ya da bir sınıf eklediğinde otomatik başlar. Ama bazen animasyonun, örneğin kullanıcı bir öğeyi görebilene kadar, ya da bir JavaScript olayı tetiklenene kadar beklemeye ihtiyacı vardır. burada animation-trigger devreye giriyor; animasyonun başlaması için gerçek bir sebep tanımlayabilirsin.

Pratik bir örnek: bir sayfa kaydırılırken (scroll) görüş alanına giren bir kutunun rengi değişsin. Sayfanın en başında animasyon çalışmaz, sadece kutu görüldüğü zaman başlar. Ya da bir düğmeye tıklandığında bir modal pencerenin animasyon ile açılması gibi.

Bu özellik özellikle performans açısından da avantajlı. Gereksiz animasyonlar çalışmadığı için tarayıcı daha az işlem yapar. Ayrıca kullanıcı deneyimi iyileşir; animasyonlar tam zamanında ve anlamlı bir şekilde gerçekleşir.

CSS-Tricks'teki detaylı rehberi inceleyerek öğrenebilirsin. Tarayıcı desteği henüz tam olmasa da, modern projeler için bu tür kontrollü animasyonlar giderek daha yaygın hale geliyor. JavaScript ile benzer etkiler oluşturmak da mümkün; Intersection Observer API'si kullanarak scroll tetiklemesi yapabilirsin.