Chrome, tarayıcılar arasında bir ilke imza atarak kaydırma tetiklemeli animasyonları (scroll-triggered animations) kullanıma sundu. Chrome 146 sürümüne güncelleme yapan kullanıcılar, bir karenin arka planının yalnızca tamamen görünür alana girdiğinde 300 milisaniye içinde soluklaştığı bir demo ile bu özelliği deneyimleyebiliyor. Bu özellik, daha önce var olan kaydırma odaklı animasyonlardan (scroll-driven animations) farklı bir yaklaşım sunuyor.
Kaydırma tetiklemeli animasyonlar, belirli bir kaydırma eşiği aşıldığında sabit bir süre boyunca çalışır. Bu, JavaScript'teki Intersection Observer API'sine benzer ancak doğrudan CSS animasyonları için tasarlanmıştır. Kaydırma odaklı animasyonlarda ise animasyon ilerlemesi kaydırma ilerlemesiyle (animation-timeline: scroll()) veya kesişme derecesiyle (animation-timeline: view()) senkronize olduğu için sabit bir süre yoktur. Yeni özellik, timeline-trigger: view() kullanarak öğenin eşik değerine ulaşmasını bekler ve ardından animasyonu oynatır.
Temel bir örnekte, @keyframes ile tanımlanan fade-bg-in animasyonu, .square sınıfına 300ms süreyle atanır. timeline-trigger özelliği, animasyonun ne zaman tetikleneceğini belirler: öğenin alt kenarı görünür alana girdiğinde (entry 100%) başlar ve üst kenar görünür alandan çıktığında (exit 0%) durur. animation-trigger ise play-once veya play-forwards gibi davranışları kontrol eder. Örneğin, play-once ile animasyon bir kez oynar ve son halini korur; play-forwards play-backwards ile ise öğe görünür alana girdiğinde normal, çıktığında ters yönde animasyon oynatılır.
Bu özellik, web geliştiricilere daha akıcı ve performanslı sayfa geçişleri sunarken, JavaScript kullanımını azaltarak kod bakımını kolaylaştırıyor. Chrome'un bu hamlesi, CSS animasyonlarının yeteneklerini genişleterek kullanıcı deneyimini iyileştirmeyi hedefliyor. Gelecekte diğer tarayıcıların da bu standardı benimsemesi bekleniyor.
