Chrome tarayıcısı, sürüm 146 ile birlikte scroll tetiklemeli animasyonları (scroll-triggered animations) desteklemeye başladı ve bu özelliği sunan ilk tarayıcı oldu. Yeni özellik sayesinde, bir öğenin tamamı görünür alana girdiğinde, örneğin bir karenin arka plan renginin 300 ms içinde solması gibi animasyonlar tetiklenebiliyor. Bu, daha önce yalnızca JavaScript Intersection Observer API ile yapılabilen bir işlemin artık CSS ile yapılabilmesi anlamına geliyor.
Scroll tetiklemeli animasyonlar, scroll-driven animasyonlardan farklı çalışır. Scroll-driven animasyonlarda animasyon ilerlemesi kaydırma ilerlemesiyle senkronize olurken (animation-timeline: scroll() veya view()), scroll tetiklemeli animasyonlar belirli bir kaydırma eşiği aşıldığında sabit bir süre boyunca oynar. Örneğin, bir öğe tamamen görünür hale geldiğinde animasyon başlar ve 300 ms sürer, ardından durabilir veya ters yönde oynayabilir.
Temel kullanımda, timeline-trigger özelliği view() ile birleştirilerek animasyonun hangi kaydırma aralığında tetikleneceği belirlenir. Örneğin, 'entry 100% exit 0%' ifadesi, öğenin alt kenarı görünür alana girdiğinde (entry 100%) tetikleme başlar ve üst kenar çıktığında (exit 0%) tetikleme sona erer. animation-trigger özelliği ise play-forwards, play-once veya play-backwards gibi anahtar kelimelerle animasyonun nasıl oynayacağını kontrol eder. play-forwards, her tetiklemede animasyonu baştan sona oynatırken, play-once yalnızca bir kez oynatır ve son durumu korur.
Uzmanların Görüşleri
Bu yeni özellik, web geliştiricilere kaydırma tabanlı etkileşimler için daha fazla esneklik sunuyor. Özellikle, kullanıcı kaydırdıkça öğelerin belirli bir eşikte animasyon göstermesi gereken durumlarda JavaScript kullanma ihtiyacını azaltıyor. Chrome 146 ile birlikte gelen bu özellik, CSS'in yeteneklerini genişleterek daha akıcı ve performanslı kullanıcı deneyimleri oluşturulmasına olanak tanıyor.