Chrome, kaydırmayla tetiklenen animasyonları (scroll-triggered animations) destekleyen ilk tarayıcı oldu. Chrome 146'ya güncelleme yaparak, bir karenin arka planının 300ms boyunca soluklaştığı bir demo görebilirsiniz. Bu animasyon, yalnızca kare tamamen görünür alana girdiğinde tetikleniyor. Bu özellik, kaydırmayla yönlendirilen animasyonlardan (scroll-driven animations) farklı çalışıyor.
Kaydırmayla tetiklenen animasyonlar, belirli bir kaydırma eşiği aşıldığında sabit bir süre boyunca oynar. JavaScript'teki Intersection Observer API'sine benzer, ancak CSS animasyonları için tasarlanmıştır. Kaydırmayla yönlendirilen animasyonlarda ise animasyon ilerlemesi kaydırma ilerlemesiyle senkronize olur ve süre kavramı yoktur.
Temel bir örnekte, @keyframes ile arka plan rengini değiştiren bir animasyon tanımlanır ve .square sınıfına uygulanır. timeline-trigger özelliği, animasyonun ne zaman tetikleneceğini belirler. Örneğin, entry 100% exit 0% değerleri, animasyonun karenin alt kenarı göründüğünde başlamasını ve üst kenar kaybolana kadar aktif kalmasını sağlar. animation-trigger ile de play-forwards gibi davranışlar eklenebilir.
Animasyonun tekrar tetiklenmesini önlemek için play-once kullanılabilir. Ayrıca, play-forwards play-backwards ile animasyonun hem ileri hem geri oynatılması sağlanarak daha akıcı bir deneyim elde edilebilir. Bu yeni özellikler, CSS animasyonlarına esneklik ve performans katıyor.
