Chrome 146 sürümüyle birlikte, scroll-triggered animations (kaydırma tetiklemeli animasyonlar) özelliği kullanıma sunuldu. Bu, bir tarayıcının bu tür animasyonları yerel olarak desteklediği ilk örnek. Özellik, bir öğe belirli bir kaydırma eşiğini geçtiğinde sabit süreli animasyonların oynatılmasını sağlıyor. Örneğin, bir kare tamamen görünür alana girdiğinde arka plan renginin 300 ms içinde soluklaşarak belirmesi gibi. Bu, JavaScript'in Intersection Observer API'sine benzer bir işlev sunarken, tamamen CSS tabanlı bir çözüm getiriyor.
Scroll-triggered animasyonlar, scroll-driven animasyonlardan farklı çalışır. Scroll-driven animasyonlarda animasyon ilerlemesi kaydırma ilerlemesiyle senkronize olurken (animation-timeline: scroll() veya view()), scroll-triggered animasyonlar belirli bir eşik aşıldığında sabit süre boyunca oynar. Bu, animasyonun süresinin olmadığı scroll-driven animasyonlara kıyasla daha geleneksel bir zaman tabanlı animasyon deneyimi sunar. Temel fark, timeline-trigger özelliğinin kullanılmasıdır; bu, öğenin ne kadar görünür olduğunu ölçmek yerine, eşiğe ulaşılıp ulaşılmadığını kontrol eder.
Örnek bir kullanımda, @keyframes ile tanımlanan fade-bg-in animasyonu, .square sınıfına uygulanır. timeline-trigger: --trigger view() entry 100% exit 0%; ifadesi, animasyonun ne zaman tetikleneceğini belirler. Burada entry 100%, öğenin alt kenarının görünür alana tamamen girdiği anı, exit 0% ise üst kenarın alandan çıktığı anı ifade eder. animation-trigger: --trigger play-forwards; ile animasyon ileri yönde oynatılır. Ancak, animasyon-fill-mode belirtilmezse animasyon bittiğinde stil korunmaz, bu da animasyonun sadece bir flaş gibi görünmesine neden olur.
Bu sorunu çözmek için iki yöntem vardır: 'lock-in' ve 'back-and-forth'. Lock-in yönteminde play-once kullanılarak animasyon bir kez oynar ve forwards fill mode ile son durum korunur. Back-and-forth yönteminde ise play-forwards play-backwards kullanılarak öğe tam görünür olduğunda ileri, görünür olmadığında ters yönde animasyon oynatılır. Bu sayede geçişler yumuşak olur. Ayrıca, farklı
