Chrome 146 sürümüyle birlikte, scroll ile tetiklenen animasyonlar (scroll-triggered animations) tarayıcıya eklendi ve bu özelliği sunan ilk tarayıcı Chrome oldu. Bu yenilik sayesinde, bir öğe belirli bir kaydırma eşiğini geçtiğinde CSS animasyonları sabit bir süre boyunca oynatılabiliyor. Örneğin, bir kare tamamen görünür hale geldiğinde arka plan rengi 300 ms içinde yavaşça belirebiliyor. Bu, JavaScript'in Intersection Observer API'sine benzer bir işlev sunuyor ancak tamamen CSS tabanlı.
Scroll ile tetiklenen animasyonlar, scroll ile sürüklenen animasyonlardan (scroll-driven animations) farklıdır. Scroll-driven animasyonlarda animasyon ilerlemesi kaydırma ilerlemesiyle senkronize olur ve süre kavramı yoktur. Örneğin, animation-timeline: scroll() veya animation-timeline: view() kullanılır. Oysa scroll-triggered animasyonlarda timeline-trigger: view() kullanılır ve öğenin eşik içinde olması beklenir, ne kadar içinde olduğu ölçülmez. Bu, animasyonun belirli bir sürede tamamlanmasını sağlar.
Temel kullanımda, @keyframes ile animasyon tanımlanır ve öğeye animation özelliği eklenir. Ardından timeline-trigger ile tetikleme koşulları belirtilir. Örneğin, entry 100% exit 0% değeri, animasyonun öğenin alt kenarı görünür hale geldiğinde başlamasını ve üst kenar görünmez olduğunda durmasını sağlar. animation-trigger özelliği ise play-forwards, play-once veya play-backwards gibi eylemleri belirler. Örneğin, play-once ile animasyon bir kez oynar ve son durumu korur, böylece tekrar tetiklenmez.
Nasıl Önlem Alınmalı?
Farklı senaryolar için fill mode değerleri de önemlidir. forwards, animasyon sonundaki stillerin korunmasını sağlarken, backwards başlangıç stillerini uygular. play-forwards ve play-backwards kombinasyonu, öğe tam görünürken ileri, görünmezken geri oynatarak yumuşak geçişler sunar. Ayrıca, birden fazla tetikleyici yönetmek için none değeri de kullanılabilir. Bu özellik, web geliştiricilere daha etkileşimli ve göz alıcı sayfalar oluşturma imkanı veriyor.
